Text mit CSS unterstreichen

Jeder, der schon mal eine Website erstellt hat, weiß wie man Texte unterstreichen kann. Dazu nutzte man im Grunde genommen das HTML Tag <u>. Dies gilt seit HTML 4.01 jedoch als veraltet. Es ist zwar mit HTML 5 wiederbelebt, hat hier aber eine andere Bedeutung. Es soll nur für Texte genutzt werden, so heißt es in der Spezifikation, die sich vom Stil her von anderen Texten unterscheiden sollen. Bspw. für falsch geschriebene Wörter. Aber du kannst auch einen Text mit CSS unterstreichen, wenn du sie besonders hervorheben möchtest.

In diesem Artikel zeige ich dir, wie das funktioniert.

 

Einen Text mit CSS unterstreichen

Um einen Teil von einem Text hervorzuheben, kannst du auch diesen Text mit CSS unterstreichen, ohne dass du dabei das <u> Tag zweckentfremden musst. Schaue dir dazu einfach mal das folgende Beispiel an.

 

Beispiel:

<p>Dieser Text ist <span style="border-bottom:1px dashed #ff0000;">dünn, rot  und gestrichelt unterstrichen</span></p>
<p>Dieser Text ist <span style="border-bottom:1px dotted #ff0000;">dünn, rot und gepunktet unterstrichen</span></p>
<p>Dieser Text ist <span style="border-bottom:3px solid #ff0000;">dick und rot unterstrichen</span></p>

 

Erklärung:

Mit dem Inline Element <span> kannst du dabei den Text auf vielfältige Art und Weise unterstreichen. Farbe und Dicke des Rahmens sind dabei im Prinzip frei wählbar. Als Rahmentyp kannst du dabei folgende Attribute wählen:

 

CSS-Eigenschaft Erklärung
dotted gepunktet
dashed gestrichelt
solid durchgezogene Linie
double doppelte Linie
groove 3D-Linie
ridge 3D-Linie
inset 3D-Linie
outset 3D-Linie

 

Hinweis:

Eleganter ist es natürlich, wenn du die CSS-Eigenschaften in dein externes Stylesheet auslagerst und als Klasse in deinen Text einbaust. Zum Beispiel mit <p><span class="rotunterstrich">Dies ist ein rot unterstrichener Text</span></p>, aber das sollte ja selbstverständlich sein.

Ein weiterer Vorteil dieser Methode ist, dass du den gewählten Effekt auch an anderen Stellen deiner Website einsetzen kannst. Du musst dann nicht alle Angaben erneut in den Quellcode hineinschreiben.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.