Dietext-underline-offsetCSS Eigenschaft legt die Versatzdistanz einer unterstrichenen Textdekoration (angewandt mittext-decoration) von ihrer ursprünglichen Position fest.

Probieren Sie es aus

text-underline-offset: auto;

text-underline-offset: 8px;

text-underline-offset: -0.5rem;

<section>  <p>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 Bestandteil dertext-decoration Kurzschreibweise. Während ein Element mehreretext-decoration Linien haben kann, beeinflussttext-underline-offset nur die Unterstreichung undnicht andere mögliche Linienstilverzierungen wieoverline oderline-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;

Die Eigenschafttext-underline-offset wird als ein einzelner Wert aus der untenstehenden Liste angegeben.

Werte

auto

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

<length>

Gibt den Versatz von Unterstreichungen als<length> an, der die Empfehlung der Schriftdatei und die Vorgabe des Browsers überschreibt. Es wird empfohlen,em Einheiten zu verwenden, sodass der Versatz mit der Schriftgröße skaliert.

<percentage>

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

Offizielle Definition

Offizielle Syntax

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

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

Beispiele

Demonstration von text-underline-offset

<p>Here's some text with an offset wavy red underline!</p><br /><p>  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