20.02.12

Mit CSS farbig unterstreichen – bunter geht’s immer

Oft wurde an mich der Wunsch herangetragen Text bunt durchzustreichen bzw. zu unterstreichen. Nach einiger Suche bin ich nun endlich auf eine Lösung gestoßen.

Der Trick ist es, mehrere span-Tags (oder andere) verschachtelt einzusetzen:

  Hier ein Beispiel  

Das HTML-Markup sieht dazu wie folgt aus:

<span style="text-decoration: line-trough; color: red">
    &nbsp;&nbsp;
    <span style="color:blue">
        Hier ein Beispiel
    </span>
    &nbsp;&nbsp;
</span>

Das ganze kann man natürlich auch auf die Spitze treiben:

Hier ein Beispiel

Hier der Code dazu:

<span style="text-decoration: underline; color: #8f00b3;">
    <span style="text-decoration: overline; color: green;">
	    <span style="text-decoration: line-through; color: red;">
	        <span style="color: blue;">
			    Hier ein Beispiel
			</span>
		</span>
	</span>
</span>

Ob das letzte Beispiel für den Einsatz in der Praxis geeignet ist muss nun jeder Leser für sich entscheiden – aber wenigstens zeigt es die Möglichkeiten auf.

Das könnte Sie auch interessieren:

• Internet Explorer: CSS Transparenz und Text
• Browserkompatibilität auf mobilen Geräten
• Public Domain Fotos und Icons
• Benutzerfreundliche HTML Tabellen – Ja, es geht.
• Die Sache mit den Zeilenumbrüchen

Sag deine Meinung

Die E-Mail Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.