Wie entferne ich die Unterstreichung aus angehängten URLs mit :after und Text mit variabler Breite?

Adressierung der Textdekoration und des :after-Pseudoelements

In einer früheren Untersuchung wurde die Frage der Verwendung der :after-Pseudoklasse behandelt Das Anhängen von URLs an Links in einem gedruckten Stylesheet wurde ausgelöst. Die bereitgestellten Antworten erwiesen sich jedoch als unzureichend.

Das Hauptproblem war die Unfähigkeit, den standardmäßigen Unterstreichungsstil aus der angehängten URL zu entfernen, obwohl explizit „text-decoration: none;“ festgelegt wurde. Dies führte dazu, dass sich in Browsern wie Firefox und Chrome eine unansehnliche Unterstreichung unter der URL ausdehnte.

Eine Lösung für Text mit variabler Breite

Die zuvor vorgeschlagenen Lösungen verwendeten Techniken wie Auffüllen und Hintergrundbilder, um die problematische Eigenschaft der Textdekoration zu umgehen. Diese Methoden sind jedoch nicht anwendbar, wenn der angehängte Inhalt Text mit variabler Breite ist.

Um dieses Problem zu beheben, ändern Sie die Anzeigeeigenschaft des :after-Pseudoelements in „inline-block“. Dies ermöglicht die 'text-decoration: none;' Deklaration wirksam werden, wie im folgenden Code gezeigt:

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

Dieses angepasste CSS stellt sicher, dass die angehängte URL unabhängig von ihrer Breite ohne Unterstreichung angezeigt wird. Durch die Anwendung dieser Problemumgehung können Sie Text mit variabler Breite effektiv an Links anhängen und die gewünschte Farbe angeben, wodurch das ursprüngliche Problem behoben und eine verfeinerte gedruckte Darstellung von URLs bereitgestellt wird.

Das obige ist der detaillierte Inhalt vonWie entferne ich die Unterstreichung aus angehängten URLs mit :after und Text mit variabler Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!