CSS text-decoration

text-decoration kennen wir durch das automatische Unterstreichen von Links. Der Unterstrich kann aber auch für andere Elemente eingesetzt werden.

text-decoration markiert seit den Anfängen des Webs einen Text durch Unterstreichen, einen Strich über dem Element oder durch das Element. Mit CSS3 bekommt der einfache Strich eine eigene Farbe und Stile ähnlich wie CSS border.

text-decoration ist seit CSS3 die Kurzfassung für text-decoration-line, text-decoration-style, text-decoration-color und text-decoration-skip.

Das automatische Unterstreichen von Hyperlinks – a-Tags – erfolgt durch den CSS-Stil text-decoration: underline; und kann durch text-decoration: none; aufgehoben werden.

Erst mit CSS3 können Strichfarbe sowie der Stil des Strichs verändert werden. Die Strichstärke kann nicht beeinflußt werden. text-decoration ist jetzt die Kurzfassung für vier Eigenschaften.

Alles frisch gestrichen!

-webkit-text-decoration-line: underline;
-webkit-text-decoration-style: dotted; 
-webkit-text-decoration-color: orchid;
-webkit-text-decoration-skip: ink;

text-decoration-line: underline;
text-decoration-style: dotted; 
text-decoration-color: orchid;
text-decoration-skip: ink;

oder kurz

text-decoration: underline dotted orchid ink;

Zurzeit unterstützen Chrome und Firefox die Eigenschaften text-decoration-style und text-decoration-color. Safari braucht den -webkit-Browser-Präfix, IE und EDGE unterstützen schaffen immerhin den normalen Unter-, Über und Durchstrich, mehr aber auch nicht.

text-decoration-skip

Der Abstand des automatischen Unterstrichs lässt sich nicht beeinflussen. Da der Strich nah unter dem Text sitzt, durchkreuzt der Unterstrich in den meisten Browsern Buchstaben wie g und y.

Der Unterstrich schneidet g und y

text-decoration-skip:ink würde diesen typografischen Unglücksfall verhindern – wird aber noch von keinem Browser unterstützt (Safari durchstreicht die Unterlängen bei Buchstaben wie g, ß und y von Haus aus nicht). text-decoration-skip wird vielleicht aus CSS3 wieder herausfallen, da kein Browser die Eigenschaft implementiert.

text-decoration-line

Alle drei Werte für text-decoration-line können in einer Regel gesetzt werden.

Alles frisch gestrichen!

Auf andere Elemente als Texte darf text-decoration nicht wirken.

paint

<p style="text-decoration: underline overline;">
   <img src="paint.png" alt="paint" width="397" height="177" /> 
</p>

text-decoration-line: unterstreicht und überstreicht Texte, streicht Text in der Mitte durch und/oder veranlasst, dass der Text blinkt.
Werte: none | underline | overline | line-through

none: ist die Standardeinstellung. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen den Text nicht beeinflussen.
underline: zieht eine Linie unter dem Text.
overline: zieht eine Linie über dem Text.
line-through: zieht eine Linie mitten durch den Text.
blink: blendet einen Text ein und aus. Standardkonforme Browser sollten allerdings nicht blinken.

text-decoration-color

Farbe als Hex-Wert, RGB, HSL oder Farbname

text-decoration-style

text-decoration-skip

none überspringt nichts
objects überspringt das komplette Element, wenn es sich um ein inline-Element wie image oder inline-block handelt.
spaces überspringt Leerzeichen und Raum zwischen Wörtern
ink überspringt Unterlängen von Glyphen (Buchstaben und Ziffern)
edges setzt Anfang und Ende leicht innerhalb des unterstrichenen Bereichs, damit sich Ende und Anfang eines folgenden Elements nicht berühren und den Eindruck einer Unterstreichung machen.
box-decoration überspring margin, border und padding-Bereiche des Elements und wird erst, wenn ein Element text-decoration von einem Parent-Element erbt.

text-decoration overline

Und was fängt man mit overline an? Ein kleiner billiger Ersatz für das verlorene MathML: Das Wurzelsymbol über die komplette Formel aufziehen.

√2x + ab

<div class="formel">
   √<span class="oli">2x + ab</span>
</div>

.formel { font-size: 2em;}
.oli {text-decoration: overline; font-size: 110%}