text-decoration-line
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die text-decoration-line
-Eigenschaft von CSS legt die Art der Dekoration fest, die auf den Text in einem Element angewendet wird, z.B. eine Unter- oder Überstreichung.
Probieren Sie es aus
Wenn Sie mehrere Textdekorationseigenschaften gleichzeitig festlegen, kann es bequemer sein, die Kurzschreibweiseigenschaft text-decoration
zu verwenden.
Syntax
/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
/* Multiple keywords */
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */
/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;
Die Eigenschaft text-decoration-line
wird als none
oder als eine oder mehrere durch Leerzeichen getrennte Werte aus der unten stehenden Liste angegeben.
Werte
none
-
Erzeugt keine Textdekoration.
underline
-
Jede Textzeile hat eine dekorative Linie darunter.
overline
-
Jede Textzeile hat eine dekorative Linie darüber.
line-through
-
Jede Textzeile hat eine dekorative Linie, die durch die Mitte verläuft.
blink
-
Der Text blinkt (wechselnd zwischen sichtbar und unsichtbar). Konforme Benutzeragenten können den Text möglicherweise nicht blinken lassen. Dieser Wert ist veraltet zugunsten von CSS-Animationen.
Formale Definition
Initialer Wert | none |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Grundlegendes Beispiel
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
.both {
text-decoration-line: underline overline;
}
Spezifikationen
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-line-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Wenn Sie mehrere Textdekorationseigenschaften gleichzeitig festlegen, kann es bequemer sein, die Kurzschreibweiseigenschaft
text-decoration
zu verwenden, die außerdem umfasst: text-underline-offset