> CSS: Text unterstreichen - So gehts! - Blogseite.com



CSS: Text unterstreichen – So gehts!

Wenn du einen Text in CSS unterstreichen möchtest, dann verwendest du das Element text-decoration. Den einfachsten Weg einen Text zu unterstreichen zeige ich dir in einem kurzen Beispiel

Stelle deine HTML oder CSS Frage in unserem Forum, kostenlos und ohne Anmeldung!

Text unterstreichen mit CSS

Mit diesem CSS Code kannst du deinen Text unterstreichen. In folgendem Beispiel wird der Text grün unterstrichen.

Linie unter dem Text

.container {
text-decoration: underline;
text-decoration-color: green;
}

Ergebnis

Dieser Text ist unterstrichen

Linie über dem Text

.container {
text-decoration: overline;
text-decoration-color: green;
}

Ergebnis

Dieser Text ist unterstrichen

CSS Text wird durchgestrichen

.container {
text-decoration: line-through;
text-decoration-color: green;
}

Ergebnis

Dieser Text ist unterstrichen

Linienart festlegen

Wenn du möchtest das die Linie in verschiedenen Styles angezeigt wird dann kannst du das mit folgenden CSS Codes realisieren.

CSS gestrichelte Linie unter Text

.container {
text-decoration: underline;
text-decoration-color: green;
text-decoration-style: dashed;
}

Ergebnis

Dieser Text hat eine gestrichelte Linie

CSS gepunktete Linie unter Text

.container {
text-decoration: underline;
text-decoration-color: green;
text-decoration-style: dotted;
}

Ergebnis

Dieser Text hat eine gepunktete Linie

Doppelte Linie

.container {
text-decoration: underline;
text-decoration-color: green;
text-decoration-style: double;
}

Ergebnis

Dieser Text ist doppelt unterstrichen

CSS Text mit Schlangenlinien

.container {
text-decoration: underline;
text-decoration-color: green;
text-decoration-style: wavy;
}

Ergebnis

Dieser Text hat Schlangenlinien

Fazit

Jetzt bist du perfekt ausgerüstet und kannst jeden erdenklichen Text mit CSS unterstreichen und alle Formen und Farben verwenden. Viel Spaß


Über Mich



    css hintergrundbild