text-decoration

CSS text-decoration: Unterstreichen aus

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Unterstreichen, unterstricheln

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.

Die paraguayische Harfe

text-decoration: underline;
text-decoration-style: dotted; 
text-decoration-color: orchid;

oder kurz

-webkit-text-decoration: underline dotted orchid;
text-decoration: underline dotted orchid;

Zurzeit unterstützen Chrome, Firefox und Safari die Eigenschaften text-decoration-style und text-decoration-color. 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, durchkreuzte der Unterstrich in den alten Browserversionen Buchstaben wie g und y – in Chrome, Safari und Firefox bleiben die Unterlängen heil.

Der Unterstrich schneidet g und y

text-decoration-skip:ink sollte diesen typografischen Unglücksfall verhindern. text-decoration-skip ist aus CSS3 wieder entfernt, die Browser (bis auf IE und Edge) lassen heute von Haus aus eine Lücke im Unterstrich.

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 line-through;">
   <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.

An dieser Stelle lebt der Standard – Eigenschaften kommen und gehen wieder. Die Fortsetzung von text-decoration folgt in CSS4.

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%}