Wie kann man die Unterstreichung bei Ankern (Links) entfernen?

Question

Gibt es eine Möglichkeit (in CSS), die Unterstreichung für den Text und die Links auf der Seite zu vermeiden?

Answer 1

Ich habe mich mit diesem Problem beim Rollendruck herumgeschlagen und es gelöst. Geprüftes Ergebnis.

a {
  text-decoration: none !important;
}

Es funktioniert!

Answer 2

Die beste Option für Sie, wenn Sie nur die Unterstreichung von Ankerlinks entfernen möchten.

#content a {
    text-decoration-line:none;
}

Dadurch wird der Unterstrich entfernt.

Darüber hinaus können Sie eine ähnliche Syntax auch für die Bearbeitung anderer Stile verwenden.

text-decoration: none;
text-decoration-color: blue;
text-decoration-skip: spaces;
text-decoration-style: dotted;

Ich hoffe, das hilft!

P.S.. Dies ist meine erste Antwort überhaupt!

Answer 3

Manchmal wird es durch einige Rendering UI CSS überschreiben. Besser zu verwenden:

a.className {
  text-decoration: none !important;
}

Answer 4

In meinem Fall gab es eine Regel über den Hover-Effekt durch den Anker, wie diese:

#content a:hover {
  border-bottom: 1px solid #333;
}

Ja, natürlich, text-decoration: none; konnte in dieser Situation nicht helfen. Und ich verbringe eine Menge Zeit, bis ich es herausgefunden habe.

So: Ein Unterstrich ist nicht zu verwechseln mit einem Unterstrich am Rand.

Answer 5

Wenn Sie einen Anker-Tag einfach nur als Link ohne die zusätzliche Gestaltung (wie die Unterstreichung bei Hover oder die blaue Farbe) verwenden möchten, fügen Sie class="no-style" zum Anker-Tag. Erstellen Sie dann in Ihrem globalen Stylesheet die Klasse "no-style".

.no-style {
    text-decoration: none !important;
}

Dies hat zwei Vorteile.

1. Es werden nicht alle Anker-Tags betroffen sein, sondern nur diejenigen, denen die Klasse "no-style" hinzugefügt wurde.
2. Damit werden alle anderen Formatierungen außer Kraft gesetzt, die andernfalls das Setzen von text-decoration auf none verhindern könnten.