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 legt die Versatzdistanz einer unterstrichenen Textdekoration (angewandt mit text-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 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 Bestandteil der text-decoration Kurzschreibweise. Während ein Element mehrere text-decoration Linien haben kann, beeinflusst text-underline-offset nur die Unterstreichung und nicht andere mögliche Linienstilverzierungen 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;
Die Eigenschaft text-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,emEinheiten zu verwenden, sodass der Versatz mit der Schriftgröße skaliert. <percentage>-
Gibt den Versatz von Unterstreichungen als
<percentage>von 1 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
| 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 |
Offizielle 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
| Specification |
|---|
| CSS Text Decoration Module Level 4 # underline-offset |
Browser-Kompatibilität
Loading…