CSS text-decoration

CSS text-decoration kennen wir durch das automatische Unterstreichen von Links, aber 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, die Strichstärke kann nicht beeinflußt werden.

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: 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ützt nur Firefox die Eigenschaften text-decoration-style und text-decoration-color. Safari (mit Browser-Präfix) setzt die Farbe, aber ignoriert text-decoration-style, Chrome und Opera halten sich raus, IE unterstützt die neuen Eigenschaften auch in IE11 noch 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%}