Heim  >  Artikel  >  Web-Frontend  >  Wie löse ich den „Textdekorations'-Konflikt mit :after-Pseudoelementen?

Wie löse ich den „Textdekorations'-Konflikt mit :after-Pseudoelementen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-14 10:39:02921Durchsuche

How to Resolve the

Auflösung des :after-Pseudoelementkonflikts mit „text-decoration“

Ursprünglich gedacht, um das Problem des Anhängens von Bildern nach der Verwendung von Links zu lösen :danach ist diese Frage wieder aufgetaucht, wobei der Schwerpunkt auf dem Anhängen von Text mit variabler Breite liegt.

Die Herausforderung liegt in der Anwendung des „text-decoration: none“-Eigenschaft für das :after-Pseudoelement unter Beibehaltung der Inhaltsanzeige. In Firefox und Chrome bleibt die Unterstreichung der URL bestehen und macht den beabsichtigten Effekt zunichte.

Der Schlüssel zur Überwindung dieses Hindernisses liegt in der Festlegung der Eigenschaft „display: inline-block“ für :after. Diese Technik wurde erfolgreich in Chrome 25 und Firefox 19 getestet. Hier ist ein Beispiel dafür, wie es funktioniert:

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    display: inline-block;
    color: #000000;
}

Durch die Einstellung „display: inline-block“ konvertieren Sie das :after-Pseudoelement effektiv in ein blockartiges Element, das es der Eigenschaft „text-decoration“ ermöglicht, wie erwartet wirksam zu werden. Diese Technik stellt sicher, dass sich die Unterstreichung nicht mehr über die gesamte URL erstreckt, was zu dem gewünschten visuellen Effekt führt.

Das obige ist der detaillierte Inhalt vonWie löse ich den „Textdekorations'-Konflikt mit :after-Pseudoelementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn