text-underline-offset CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2020 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die text-underline-offset CSS Eigenschaft legt den Versatzabstand einer Unterstreichungslinie für Textdekorationen fest, die mit text-decoration angewendet werden, von ihrer ursprünglichen Position aus.
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 Kurzschrift von text-decoration. Während ein Element mehrere text-decoration Linien haben kann, wirkt sich text-underline-offset nur auf Unterstreichungen aus und nicht auf andere mögliche Liniendekorationsoptionen 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 einzelner Wert aus der folgenden Liste angegeben.
Werte
auto-
Der Browser wählt den geeigneten Versatz für Unterstreichungen.
<length>-
Gibt den Versatz von Unterstreichungen als
<length>an, der den Vorschlag der Schriftdatei und den Standard des Browsers überschreibt. 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 Schrift des Elements an. Ein Prozentwert wird als relativer Wert vererbt und skaliert daher mit Änderungen in der Schrift. Für eine bestimmte Anwendung dieser Eigenschaft ist der Versatz im gesamten Bereich konstant, auf den die Unterstreichung angewendet wird, selbst wenn es Kindelemente mit unterschiedlichen Schriftgrößen oder vertikalen Ausrichtungen 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
<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
| Spezifikation |
|---|
| CSS Text Decoration Module Level 4 # underline-offset |