Unterstreichung von Hyperlinks mit CSS entfernen

Die Gestaltung und Formatierung von Webseiten durch CSS ist ein wichtiger Aspekt der Webentwicklung. Besonders bei der Gestaltung von Hyperlinks könnte der Wunsch bestehen, die Unterstreichung, die standardmäßig angezeigt wird, zu entfernen. Die Lösung hierfür bietet CSS mit dem Befehl:

a {text-decoration: none}

Die Eigenschaft 'text-decoration' ist dabei für die Formatierung des Textes zuständig und mit dem Wert 'none' wird festgelegt, dass keine textliche Dekoration, einschließlich Unterstreichungen, Liniendurchschüsse oder Überstreichungen, angewendet wird.

Hier ist ein praktisches Beispiel für die Verwendung in einem HTML-Dokument:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<h2>Keine Unterstreichung bei Hyperlinks</h2>
<p><a href="http://www.example.com/">Dies ist ein Link ohne Unterstreichung</a></p>

</body>
</html>

Bei der Anwendung dieser Eigenschaft ist jedoch zu beachten, dass die Unterstreichung dabei hilft, Hyperlinks auf einer Webseite hervorzuheben und sie für den Benutzer erkennbar zu machen. Das Entfernen der Unterstreichung sollte also mit Bedacht vorgenommen werden, insbesondere im Hinblick auf die Benutzerfreundlichkeit.

Eine Alternative ist, die Unterstreichung nur beim Überfahren des Links mit der Maus (Hover-Zustand) zu entfernen:

a:hover {
  text-decoration: none;
}

Dadurch wird dem Benutzer trotzdem deutlich gemacht, dass es sich bei dem Textelement um einen Link handelt, aber das Design bleibt dabei sauber und übersichtlich.

Unterstreichung von Hyperlinks mit CSS entfernen

Related Questions