Detaillierte Kontrolle beim Dekorieren von Verweisen

Autor: Aykut Şensoy, Datum:

Sehr lange Zeit hatte man als Web-Entwickler mit den Einschränkungen von text-decoration zu kämpfen. Es war weder möglich den Abstand zwischen Text und Unterstrich sinnvoll zu steuern, noch unterschiedliche Farben für Text und Linie zuzuweisen. Auch die Dicke der Linie war nicht individuell veränderbar. Um solche speziellen UX-Anforderungen zu erfüllen, musste man die text-decoration ausblenden und sich mit padding und box-shadow behelfen.

Ich möchte hier im ersten Schritt ein Beispiel für eine text-decoration mit hover-Effekt zeigen, wie ich es vor ein paar Jahren mit einem Hack gelöst habe. Im zweiten Schritt zeige ich, wie man das Gleiche mit den neuen CSS Möglichkeiten viel eleganter lösen kann.

Legacy Lösung

<style>
a {
  text-decoration: none;
  color: black;
  box-shadow: inset 0 -1px red;
  padding-bottom: 2px;
}

a:hover {
  color: red;
  box-shadow: 0 -2px inset black;
}
</style>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Wie man an diesem Beispiel sieht, musste ich text-decoration auf "none" setzen und dann mit einem inset box-shadow eine Linie simulieren, die ich dann auch in der Farbe und Dicke steuern konnte. Mit diesem Hack war es dann auch möglich den Abstand zwischen Text und Unterstrich mit padding-bottom zu verändern.

Moderne Lösung (Langschreibweise)

<style>
a {
  color: black;
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-position: under;
  text-underline-offset: 2px;
}

a:hover {
  color: red;
  text-decoration-color: black;
  text-decoration-thickness: 2px;
}
</style>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Mit den neuen CSS Möglichkeiten hat man volle und sehr detaillierte Kontrolle über die Gestaltung der text-decoration. Man kann nicht nur die Farbe und die Dicke unabhängig vom Text steuern, sondern auch den Abstand des Unterstrichs zum Text mit zwei speziellen Deklarationen. Mit text-decoration-position: under; wird der Unterstrich unter der Unterlänge der Glyphen platziert. Mit text-decoration-offset: 2px; wird der Unterstrich nochmal um 2px nach unten verschoben. Theoretisch könnte man hier auch direkt text-decoration-offset ohne text-decoration-position benutzen, um den Unterstrich nach unten zu verschieben. Wichtig hierbei ist zu wissen, dass diese beiden Deklarationen, wie es im Namen auch steht, auschließlich bei text-decoration-line: underline; greifen, da sie bei den anderen Dekorationen keinen Sinn machen.

Moderne Lösung (Kurzschreibweise)

<style>
a {
  color: black;
  text-decoration: underline solid red 1px;
  text-underline-position: under;
  text-underline-offset: 2px;
}

a:hover {
  color: red;
  text-decoration: underline solid black 2px;
}
</style>

Die Deklaration text-decoration wird als Kurzschreibweise eingesetzt. Es ist also die Zusammenfassung der Eigenschaften text-decoration-line, text-decoration-color, text-decoration-style und text-decoration-thickness, wobei dei Reihenfolge der Definition irrelevant ist. Man muss auch nicht zwingend alle Eigenschaften definieren. Was nicht explizit definiert ist, wird mit den default-Werten gerendert. Leider funktioniert die Kurzschreibweise nicht richtig in Safari (das neue IE11 der Web-Entwickler). Daher sollte für den Safari-Support aktuell noch die Langschreibweise benutzt werden.

Ich habe bei diesem Thema nur an der Oberfläche gekratzt. Die hier erwähnten Deklarationen bieten so viele Möglichkeiten der Dekoration, so dass es sich lohnt tiefgehender mit text-decoration auseinanderzusetzen. Ein Feature habe ich sogar gar nicht angesprochen, da es hier inhaltlich nicht hineingepasst hat, nämlich "text-decoration-skip-ink". Ich kann daher nur empfehlen mit text-decoration herumzuspielen, um noch das eine oder andere interessante Feature für sich zu entdecken.