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

So kannst du in CSS Text unterstreichen:

Einfache Unterstreichung:

Dies ist die Standardmethode und verwendet die Eigenschaft text-decoration: underline;.

p {
  text-decoration: underline;
}

Farbe des Unterstrichs ändern:

Mit der Eigenschaft text-decoration-color kannst du die Farbe des Unterstrichs festlegen.

p {
  text-decoration: underline;
  text-decoration-color: red;
}

Art des Unterstrichs ändern:

Es gibt verschiedene Stile für den Unterstrich, die du mit der Eigenschaft text-decoration-style festlegen kannst.

• none: Kein Unterstrich (Standard)
• underline: Einfacher Unterstrich
• overline: Linie über dem Text
• line-through: Linie durch den Text
• double: Doppelter Unterstrich
• dotted: Gepunktete Linie
• dashed: Gestrichelte Linie
• wavy: Wellenförmige Linie

p {
  text-decoration: underline;
  text-decoration-style: dashed;
}

Dicke des Unterstrichs ändern:

Mit der Eigenschaft text-decoration-thickness kannst du die Dicke des Unterstrichs festlegen.

p {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

Position des Unterstrichs ändern:

Standardmäßig wird der Unterstrich unter den Textkörper platziert. Mit der Eigenschaft text-decoration-position kannst du die Position ändern.

• above: Linie über dem Text
• below: Linie unter dem Text (Standard)
• line-through: Linie durch den Text

p {
  text-decoration: underline;
  text-decoration-position: above;
}

Unterbrechung des Unterstrichs bei Unterlängen:

Bei einigen Schriftarten werden Unterlängen (z.B. „g“, „j“, „p“, „q“) nicht vollständig vom Unterstrich abgedeckt. Mit der Eigenschaft text-decoration-skip-ink kannst du dies verhindern.

• none: Standardverhalten (Unterstrich unterbricht Unterlängen)
• auto: Automatische Anpassung (Browserabhängig)
• inline: Unterstrich unterbricht keine Zeichen
• none: Unterstrich unterbricht alle Zeichen

p {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

Kombination der Optionen:

Du kannst verschiedene Optionen miteinander kombinieren, um den gewünschten Effekt zu erzielen.

p {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-style: dashed;
  text-decoration-thickness: 3px;
  text-decoration-position: above;
  text-decoration-skip-ink: auto;
}

Zusammenfassung:

Mit den CSS-Eigenschaften text-decoration, text-decoration-color, text-decoration-style, text-decoration-thickness, text-decoration-position und text-decoration-skip-ink hast du vielfältige Möglichkeiten, Texte in deinen Webseiten zu unterstreichen und individuell zu gestalten.

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Kennst du schon diese Memes?

Smiley Bedeutung