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

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!