Bunter Unterstrich

Eine findige Lösung aus der Anfangszeit von HTML ist mir wieder unter die Finger gekommen, und zwar der bunte Unterstrich. Die damaligen Style-Möglichkeiten waren ziemlich begrenzt, man musste weitgehend mit HTML-Elementen zur physischen Formatierung auskommen.

Es funktioniert noch:

Code:

<span style="color:red;">
  <u><span style="color:black;">
    Ein bunter Unterstrich!</span>
  </u>
</span>

Leider weiß ich nicht mehr, woher diese Lösung stammt.

Zuerst wird die Unterstrich-Farbe für das u-Element realisiert und für den Elementinhalt die gewünschte Zeichenfarbe gesetzt.

Styling in den CSS-Bereich verlagert:

Code im CSS Bereich:

.undercolor { color:red;   }
.textcolor  { color:black; }

HTML-Code:

<u class="undercolor">
  <span class="textcolor">
    Geht natürlich auch.
  </span>
</u>

Der Nachteil ist, dass die voreingestellte Zeichenfarbe nicht automatisch angenommen, sondern extra neu definiert werden muss. Aber inzwischen gibt es ein CSS-Feature, das keine Wünsche offen lässt.

Mit text-decoration gelöst:

Code im CSS Bereich:

.unterstrich { 
  text-decoration-line: underline;
  text-decoration-color: red;
}

HTML-Code:

<span class="unterstrich">
  Und so geht es heute.
</span>

Die wichtigsten Features zu text-decoration

• in den Live-Referenzen

Erklärungen und Beispiele

• im MDN

und auch in der Spezifikation findet man Beispiele.

• CSS Text Decoration Module Level 3