kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Text Decoration Styling – Farbig unterstrichene Texte, Unterbrechungen bei Unterlängen, Effekte für Linien usw.

Links werden in HTML automatisch unterstrichen dargestellt. Ein unterstrichenes Wort auf einer Website wird daher vom Anwender intuitiv als Hyperlink interpretiert – weshalb man das Gestaltungsmittel der Unterstreichung bewusst einsetzen sollte. Der CSS-Befehl text-decoration:underline; sorgt dafür, dass ein Text unterstrichen wird. Wenn mehr gestalterische Freiheit gewünscht war, haben Designer häufig border-bottom eingesetzt. Das CSS Text Decoration Module Level 3 erweitert die Möglichkeiten von text-decoration um Farben, Abstände und Effekte.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

Die text-decoration Kurzschreibweise

Die wahrscheinlich bereits bekannte CSS-Eigenschaft text-decoration ist eine Kurzschreibweise für die Eigenschaften [text-decoration-line] [text-decoration-style] und [text-decoration-color].

.selektor {
  text-decoration: underline wavy yellowgreen;
}

text-decoration-line

Wenn ihr festlegen wollt wo sich die Linie befindet, verwendet text-decoration-line mit einem der folgenden Werte:

  • underline – Der Text wird unterstrichen
  • overline – Die Linie befindet sich oberhalb des Textes
  • line-through – Der Text wird durchgestrichen
  • blink (veraltet)

text-decoration-style

Wenn ihr beeinflussen wollt welche Form die Unterstreichung hat, könnt ihr mit text-decoration-line – ähnlich wie bei border-style – aus verschiedenen Linienarten wählen:

  • solid – durchgehende Linie
  • dashed – gestrichelte Linie
  • dotted – gepunktete Linie
  • wavy – geschwungene Linie
  • double – doppelte Linie

text-decoration-color

Mit text-decoration-color wird die Farbe bestimmt.

text-decoration-skip

Die Eigenschaft text-decoration-skip führt dazu, dass die Linie an bestimmten Stellen unterbrochen wird. Welche Stellen das sind, legt der Wert fest:

  • ink – Unterlängen des Textes werden ausgespart
  • objects – Inline-Block-Elemente werden nicht unterstrichen
  • spaces – Leerzeichen und Satzzeichen werden nicht unterstrichen
  • edges – Wenn zwei unterstrichene Elemente direkt nebeneinander liegen, wird ein Abstand angezeigt
  • box-decoration: vererbte margin-, padding- und border-Werte werden ausgespart
Dank text-decoration-skip: ink; wird die Unterstreichung bei einer Unterlänge des Textes unterbrochen

text-underline-position

Normalerweise wird die Linie in den Unterlängen eines Textes platziert – weshalb es Sinn machen kann mit text-decoration-skip Unterbrechungen einzufügen. Mit text-underline-position:under; kann die Linie auch nach unten verschoben werden.

Browser-Support

Den detaillierten Browser-Support könnt ihr auf caniuse.com nachlesen.

 

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. Michel

    Verfasst am 13. November 2017 um 12:51 Uhr.

    Danke für den Tipp. Unterlängen aussparen war mir neu, praktisch.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.