text-underline-offset CSS property

Probieren Sie es aus

text-underline-offset: auto;

text-underline-offset: 8px;

text-underline-offset: -0.5rem;

<section id="default-example">
  <p id="example-element">And after all we are only ordinary</p>
</section>

p {
  font: 1.5em sans-serif;
  text-decoration-line: underline;
  text-decoration-color: red;
}

text-underline-offset ist nicht Teil der text-decoration Kurzform. Während ein Element mehrere text-decoration Linien haben kann, wirkt sich text-underline-offset nur auf die Unterstreichung aus, und nicht auf andere mögliche Linieneffekte wie overline oder line-through.

Syntax

/* Single keyword */
text-underline-offset: auto;

/* length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/* percentage */
text-underline-offset: 20%;

/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

Werte

Diese Eigenschaft wird als einer der folgenden Werte angegeben:

auto

Der Browser wählt den passenden Versatz für Unterstreichungen.

<length>

Bestimmt den Versatz der Unterstreichungen als <length>, überschreibt den Vorschlag der Schriftdatei und die Standardeinstellung des Browsers. Es wird empfohlen, em Einheiten zu verwenden, damit sich der Versatz mit der Schriftgröße skaliert.

<percentage>

Bestimmt den Versatz der Unterstreichungen als <percentage> von 1 em in der Schrift des Elements. Ein Prozentsatz wird als relativer Wert vererbt und skaliert daher mit Änderungen in der Schrift. Bei einer Anwendung dieser Eigenschaft ist der Versatz über die gesamte Box, auf die die Unterstreichung angewendet wird, konstant, selbst wenn es Kindelemente mit unterschiedlichen Schriftgrößen oder vertikaler Ausrichtung gibt.

Formale Definition

Formale Syntax

text-underline-offset = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Demonstration von text-underline-offset

<p class="one-line">Here's some text with an offset wavy red underline!</p>
<br />
<p class="two-lines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>

p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.two-lines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• text-decoration
• text-decoration-thickness