Blaue Unterstreichung vom Link in CSS entfernen

1. Setzen Sie die Eigenschaft text-decoration auf none, um die blaue Unterstreichung von einem Link in CSS zu entfernen
2. Verwenden Sie Pseudoklassen für die Auswahl, um blaue Unterstreichungen aus einem Link in CSS zu entfernen
3. Entfernen Sie die box-shadow-Eigenschaft, um die Unterstreichung und Farbe von einem Link in CSS zu entfernen

In diesem Tutorial werden Methoden zum Entfernen der blauen Unterstreichung im Hyperlink in HTML vorgestellt. Wir werden CSS verwenden, um eine solche Unterstreichung zu entfernen.

Setzen Sie die Eigenschaft text-decoration auf none, um die blaue Unterstreichung von einem Link in CSS zu entfernen

Wir können die Eigenschaft text-decoration in CSS verwenden, um die Dekoration des Textes festzulegen. Die Eigenschaft ist eine Kurzeigenschaft von drei anderen Eigenschaften. Diese Eigenschaften sind text-decoration-line, text-decoration-color und text-decoration-style. Die Eigenschaft text-decoration-line wendet die Textdekorationen wie Überstreichen, Unterstreichen und Durchstreichen an. Die Eigenschaft text-decoration-color ist für das Einstellen der Farbe der Textdekoration verantwortlich, und der text-decoration-style wendet verschiedene Stile wie durchgezogen, wellig, gepunktet, gestrichelt auf die Textdekoration an. Wenn wir die Kurzeigenschaft text-decoration verwenden, können wir den Wert als none angeben. Als Ergebnis können wir alle drei Eigenschaften auf none setzen. Folglich wird die Unterstreichung im Hyperlink und auch die blaue Farbe entfernt.

Erstellen Sie beispielsweise ein div mit der Klasse container. Erstellen Sie dann innerhalb des div ein span mit der Klasse thisPage. Als nächstes schreiben Sie zwischen dem Tag span den Text Aktuelle Seite. Schreiben Sie in die folgende Zeile ein anchor-Tag. Setzen Sie das href-Attribut des Tags auf #. Schreiben Sie innerhalb des Tags anchor ein weiteres span mit der Klasse otherPage. Schreiben Sie den Text Nächste Seite zwischen den span. Wählen Sie dann in der entsprechenden CSS-Datei den Anker-Tag aus, der innerhalb der Klasse container als .container a liegt. Stellen Sie den Text mit dem Hex-Code #FF0000 rot ein. Setzen Sie dann die Eigenschaft text-decoration auf none.

Das folgende CSS setzt den Text Next Page auf Rot, was ein Hyperlink ist. Die Eigenschaft text-decoration, die auf none gesetzt ist, entfernt die Unterstreichung und die blaue Farbe des Elements des anchor-Tags.

Beispielcode:

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

Verwenden Sie Pseudoklassen für die Auswahl, um blaue Unterstreichungen aus einem Link in CSS zu entfernen

Wir wählen die Pseudoklassen aus und wenden die gleichen CSS-Eigenschaften wie bei der ersten Methode an, um die blaue Unterstreichung aus einem Link zu entfernen. Bisher haben wir nur das Tag anchor gewählt. In dieser Methode verwenden wir Pseudoklassen, um die Anker-Tags auszuwählen. Wir verwenden Pseudoklassen wie :hover, :visited, :link und :active. Die Klasse :hover wird angewendet, wenn der Benutzer mit einem Zeigegerät wie einer Maus auf das Element zeigt, aber nicht unbedingt auf das Element klickt. Die Klasse :visited gilt, wenn der Link bereits angeklickt ist. Ebenso wählt die Klasse :link alle nicht besuchten Links aus. Und die Klasse :active wählt den aktiven Link aus. Wir verwenden dasselbe HTML-Dokument für die Demonstration in dieser Methode.

Verwenden Sie zum Beispiel die Pseudoklassen :link, :visited, :hover und :active und wählen Sie das Tag anchor aus. Trennen Sie jede Pseudoklasse durch ein Komma. Setzen Sie die Eigenschaft text-decoration auf none und die Eigenschaft color auf #000000.

Die angewendeten CSS-Eigenschaften werden für alle Pseudoklassen im folgenden Beispiel wirksam. Der a:link-Selektor ändert die Farbe des Hyperlinks in Schwarz und entfernt die Unterstreichung, wenn der Link nicht besucht wird. Es überschreibt die Eigenschaft color aller anderen Selektoren. Der Selektor a:visited entfernt die Unterstreichung des Links, nachdem der Link besucht wurde. Die CSS-Effekte erfolgen auch, wenn wir mit der Maus über den Link fahren und wenn wir auf den Link klicken. Auf diese Weise können wir mit den CSS-Pseudoklassen die Unterstreichung und die blaue Farbe aus dem Link entfernen.

Beispielcode:

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

Entfernen Sie die box-shadow-Eigenschaft, um die Unterstreichung und Farbe von einem Link in CSS zu entfernen

Manchmal kann die Unterstreichung mit der Eigenschaft box-shadow gestaltet werden. Wir können den Unterstreichungseffekt für jeden Text bereitstellen, der die Eigenschaft verwendet. Das folgende CSS-Code-Snippet erstellt eine Unterstreichung.

box-shadow: inset 0 -3px 0 0 #bdb;

Wenn wir in einem solchen Fall die Unterstreichung entfernen möchten, können wir die Eigenschaft box-shadow entfernen oder den Wert der Eigenschaft auf none setzen.

Im folgenden Beispiel wird eine span-Klasse in grüner Farbe gestylt und die box-shadow-Eigenschaft wird verwendet, um eine rote Unterstreichung zu erzeugen. Dann wird der Wert der Eigenschaft auf none gesetzt, wodurch der Unterstreichungseffekt aus dem Text entfernt wird.

Beispielcode:

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}