Verschiedenartige Textunterstreichung

Mit CSS ist es ganz einfach möglich, deine Texte etwas peppiger zu unterstreichen, als mit einer schwarzen Linie.

 

Code-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 diesem <span style="..."> kannst du ganz einfach verschiedenartige Unterstreichungen für deinen Text wählen. 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.