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 CSS-Eigenschaft text-underline-offset legt den Abstand einer Unterstreichungs-Textdekorationslinie (angewendet mit text-decoration) von ihrer ursprünglichen Position fest.
text-underline-offset ist nicht Teil der Kurzschreibweise text-decoration. Ein Element kann zwar mehrere text-decoration-Linien haben, text-underline-offset beeinflusst jedoch nur Unterstreichungen und nicht andere mögliche Liniendekorationsoptionen wie overline oder line-through.
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;
}
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 geeigneten Versatz für Unterstreichungen.
<length>-
Gibt den Versatz von Unterstreichungen als
<length>an und überschreibt damit den Vorschlag der Schriftdatei sowie den Browserstandard. 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 Prozentsatz wird als relativer Wert geerbt und skaliert daher mit Änderungen der Schriftart. Bei einer bestimmten Anwendung dieser Eigenschaft ist der Versatz über die gesamte Box hinweg, auf die die Unterstreichung angewendet wird, konstant, selbst wenn es Kindelemente 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
<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 |