CSS - Textdekoration

CSS-Eigenschaften zur Textdekoration

Für die Dekoration (Ausschmückung) der einzelnen Zeichen kann die Eigenschaft text-decoration benutzt werden. Folgende Werte sind möglich:

none
keine Textdekoration
underline
unterstrichene Zeichen
overline
überstrichene Zeichen
line-trough
durchgestrichene Zeichen
blink
Blinkende zeichen

Die Eigenschaft text-decoration hat ein besonderes Verhalten:

  • Für die Eigenschaft text-decoration können auch mehrere Werte angegeben werden: h2 { text-decoration: underline overline}
  • Die Eigenschaft text-decoration kann nicht durch Kind-Elemente überschrieben werden. Die Werte der Kind-Elemente werden zu den Werten der Eltern-Elemente hinzugefügt.
Beispiel: Textdekoration

Versuchen Sie anhand des Beispiels die Besonderheiten der Eigenschaft text-decoration nachzuvollziehen:

  • Passt es zur üblichen Konfliktauflösung in CSS, dass die Überschrift sowohl unter- als auch überstrichen ist?
  • Warum ist der dritte Listeneintrag nicht durchgestrichen, obwohl die Regel gilt: li {text-decoration: line-through;}
  • Warum ist das em-Element unterstrichen, obwohl für em-Elemente die Regel definiert wurde: em {text-decoration: none;}?

See the Pen CSS – Textformatierung - Textdekoration by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

-->