CSS: Text unterstreichen – So gehts!

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

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ß

Hat dir der Beitrag gefallen?


    css hintergrundbild   

Das könnte dich interessieren!

Weitere Kategorien






Schreibe einen Kommentar



23943