CSS-Unterstreichung entfernen

Im Webdesign ist Unterstreichung eine dekorative Linie, die häufig verwendet wird, um Hyperlinks Stil zu verleihen. In einigen Fällen müssen wir jedoch möglicherweise die Unterstreichung von einem Hyperlink entfernen. In CSS gibt es mehrere Möglichkeiten, Hyperlinks ohne Unterstreichungen zu erstellen.

1. text-decoration-Attribut

In CSS kann das text-decoration-Attribut verwendet werden, um die dekorativen Textzeilen zu steuern. Durch die Einstellung text-decoration:none kann die Unterstreichung des Hyperlinks entfernt werden.

Zum Beispiel kann der folgende Code die Unterstreichung von allen Hyperlinks entfernen:

a {
  text-decoration: none;
}

2. border-bottom-Attribut

Eine andere Möglichkeit besteht darin, das border-bottom-Attribut zu verwenden, um eine Unterstreichung zu simulieren. Unterstreichungen können durch Festlegen von border-bottom:none entfernt werden.

Zum Beispiel kann der folgende Code die Unterstreichung aller Hyperlinks entfernen und mithilfe des Attributs „border-bottom“ einen unteren Rand von 1 Pixel hinzufügen:

a {
  text-decoration: none;
  border-bottom: 1px solid #000;
}

3. Attribut „Hintergrundbild“

Wir können auch das Attribut „Hintergrundbild“ verwenden um es zu entfernen Unterstreichen. Die Unterstreichung kann entfernt werden, indem das Hyperlink-Hintergrundbild auf ein leeres Pixel gesetzt wird. Diese Methode kann auch zum Hinzufügen einer benutzerdefinierten Unterstreichung verwendet werden.

Zum Beispiel kann der folgende Code die Unterstreichung von allen Hyperlinks entfernen und die Unterstreichung auf eine 1 Pixel hohe, blaue Linie setzen:

a {
  text-decoration: none;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
  background-repeat: repeat-x;
  background-position: bottom;
  background-color: blue;
  height: 1px;
}

4. :after selector

Schließlich können wir auch das :after-Auswahltool verwenden um eine Unterstreichung hinzuzufügen. Diese Methode kann dem Hyperlink ein Pseudoelement hinzufügen und dem Element einen Stil hinzufügen, um den Unterstreichungseffekt zu erzielen.

Zum Beispiel kann der folgende Code die Unterstreichung aller Hyperlinks entfernen und mithilfe des :after-Selektors eine 1 Pixel hohe, schwarze Unterstreichung hinzufügen:

a {
  text-decoration: none;
  position: relative;
}

a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: black;
}

Um es zusammenzufassen: Durch Festlegen von text-decoration:none, border-bottom: Mit none, background-image und anderen Methoden können wir die Unterstreichung eines Hyperlinks entfernen oder eine benutzerdefinierte Unterstreichung hinzufügen. Durch die Verwendung des :after-Selektors können wir den Unterstreichungsstil flexibler steuern. In praktischen Anwendungen können wir je nach Situation die am besten geeignete Methode zum Entfernen von Unterstreichungen auswählen.

Das obige ist der detaillierte Inhalt vonCSS-Unterstreichung entfernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!