text-underline-offset

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.

* Some parts of this feature may have varying levels of support.

Die text-underline-offset CSS Eigenschaft setzt die Versatzdistanz einer Unterstreichungslinie für Textdekorationen (angewendet mit text-decoration) von ihrer ursprünglichen Position.

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 kein Bestandteil der text-decoration Kurzschrift. Während ein Element mehrere text-decoration Linien haben kann, beeinflusst text-underline-offset nur die Unterstreichung und nicht andere mögliche Linien-Dekorationsoptionen wie overline oder line-through.

Syntax

css

/* 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 text-underline-offset Eigenschaft wird als ein einzelner Wert aus der unten aufgeführten Liste angegeben.

Werte

auto: Der Browser wählt den passenden Versatz für Unterstreichungen.
<length>: Gibt den Versatz von Unterstreichungen als <length> an und überschreibt den Vorschlag der Schriftdatei und die Standardeinstellung des Browsers. Es wird empfohlen, em Einheiten zu verwenden, damit der Versatz mit der Schriftgröße skaliert.
<percentage>: Gibt den Versatz von Unterstreichungen als <percentage> von 1 em in der Schriftart des Elements an. Ein Prozentwert wird als relativer Wert geerbt und skaliert daher mit Änderungen in der Schriftart. Für eine gegebene Anwendung dieser Eigenschaft ist der Versatz über das gesamte Box, auf das die Unterstreichung angewendet wird, konstant, selbst wenn es untergeordnete Elemente mit unterschiedlichen Schriftgrößen oder vertikaler Ausrichtung gibt.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Prozentwerte	bezieht sich auf die Schriftgröße des Elternelements
Berechneter Wert	wie angegeben
Animationstyp	by computed value type

Formale Syntax

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

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

Beispiele

Demonstration von text-underline-offset

html

<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>

css

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

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

Spezifikationen

Specification
CSS Text Decoration Module Level 4 # underline-offset