Warum funktioniert „text-decoration: none' nicht bei :after-Pseudoelementen für Links in Printmedien?

Überarbeitet: Verwendung von „text-decoration“ und dem „:after“-Pseudoelement

In einem Versuch, ein bestehendes Problem zu lösen, Es stellt sich die Frage: Warum scheint die Eigenschaft „text-decoration: none“ unwirksam zu sein, wenn sie mit dem Pseudoelement „:after“ verwendet wird, um Text an einen Link anzuhängen? Insbesondere in gedruckten Medien besteht das gewünschte Ergebnis darin, die URL nach dem Linktext anzuzeigen, ohne störende Unterstreichungen.

Die ursprüngliche Frage konzentrierte sich auf das Anhängen von Bildern mit fester Größe, aber diese Abfrage sucht nach einer Lösung, wenn der Inhalt ist Text mit variabler Breite. Da in früheren Antworten die Verwendung von Auffüllungen und Hintergrundbildern vorgeschlagen wurde, die für Textinhalte nicht geeignet sind, wird nach einem alternativen Ansatz gesucht.

Antwort:

Die Lösung liegt in der Anwendung von „display: inline-block“-Eigenschaft für das „:after“-Pseudoelement. Auf diese Weise kann die Eigenschaft „text-decoration: none“ effektiv zum Entfernen jeglicher Unterstreichung verwendet werden.

Zur Veranschaulichung: Der folgende Code funktioniert jetzt wie erwartet:

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

Dies hat wurde in Chrome 25 und Firefox 19 getestet und verbirgt erfolgreich die Unterstreichung, während weiterhin der URL-Text angezeigt wird.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „text-decoration: none' nicht bei :after-Pseudoelementen für Links in Printmedien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!