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.

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:

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:

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:

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 für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the text-decoration feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Ingo Siemon
    schrieb am 12.01.2024 um 10:45 Uhr:

    Hallo

    Du hast auf Deine Website ja selbst sehr dünne Unterstreichungen für Deine Links. Wie realisiert man das denn?

    Gruß
    Ingo

    Antworten
    • Jonas Hellwig
      schrieb am 12.01.2024 um 10:48 Uhr:

      Hallo Ingo, die sind mit border-bottom umgesetzt. Aus heutiger Sicht hat das allerdings Nachteile – z.B. bei Barrierefreiheit, da die Linien zu schwach sind. Ich würde das heute nicht mehr so entscheiden und unser Link-Styling wird sicher irgendwann angepasst.

      Antworten
  2. Kreatives Mädel
    schrieb am 03.05.2021 um 13:37 Uhr:

    Hallo,
    kann man auch einen zweifarbigen Unterstricht gestalten? Also zum Beispiel erst 20% rot und die restlichen 80% grau

    Antworten
    • Jonas Hellwig
      schrieb am 07.05.2021 um 09:40 Uhr:

      Ja, wenn du mit oder so Teile des Textes separiert ansprichst.

      Antworten
  3. Inge Held
    schrieb am 06.10.2018 um 21:13 Uhr:

    Cool, das wende ich sofort an! :-)

    Antworten
  4. Paul
    schrieb am 27.11.2017 um 17:32 Uhr:

    Vielen Dank für den Tipp! Da freut sich das Typografenherz ;-)

    Antworten
  5. Michel
    schrieb am 13.11.2017 um 12:51 Uhr:

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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →