Anpassen der Textunterstreichungsfarben mit CSS

Im Webdesign ist das Hinzufügen einer Unterstreichung zu Text eine gängige Praxis, um Informationen hervorzuheben oder hervorzuheben. Was aber, wenn Sie durch Ändern der Unterstreichungsfarbe eine einzigartige Note hinzufügen möchten? Ist das möglich?

Ja, es ist möglich, die Farbe der Linie unter dem Text mithilfe von CSS zu ändern. Hier sind zwei Methoden, die Sie verwenden können:

Methode 1: Verwendung von text-decoration-color

Der einfachste Ansatz ist die Verwendung der Eigenschaft text-decoration-color. Diese Eigenschaft gibt die Farbe der Unterstreichung an, sodass Sie sie unabhängig von der Textfarbe anpassen können.

Um beispielsweise roten Text mit einer blauen Unterstreichung zu erstellen, würden Sie das folgende CSS verwenden:

text-decoration-color: blue;

Methode 2: Verwendung von border-bottom

Eine alternative Methode ist die Verwendung der Eigenschaft border-bottom. Diese Eigenschaft erstellt einen Rahmen am unteren Rand des Textes, der eine Unterstreichung simulieren kann. Durch Festlegen der Eigenschaft „border-bottom-color“ können Sie die Farbe der Unterstreichung festlegen.

So würden Sie beispielsweise mit „border-bottom“ den gleichen Effekt wie Methode 1 erzielen:

border-bottom: 1px solid blue;
text-decoration: none;

Hinweis: Die Eigenschaft text-decoration-color wird von modernen Browsern unterstützt. Wenn Sie ältere Browser unterstützen müssen, sollten Sie aus Kompatibilitätsgründen möglicherweise die Border-Bottom-Methode verwenden.