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.
<p style="text-decoration: underline overline;"> <img src="paint.png" alt="paint" width="397" height="177" /> </p>
CSS text-decoration
- 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
- dotted | dashed | solid | double | groove | ridge | inset | outset (wie CSS border)
- text-decoration-skip
- überspringt Bereiche: none | objects | spaces | ink | edges | box-decoration
- 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.
<div class="formel">
√<span class="oli">2x + ab</span>
</div>
.formel { font-size: 2em;}
.oli {text-decoration: overline; font-size: 110%}