How to Remove the Underline from Appended URLs with :after and Variable Width Text?

Addressing Text Decoration and the :after Pseudo-Element

In an earlier inquiry, the issue of using the :after pseudo-class to append URLs to links in a printed style sheet was raised. However, the provided answers proved insufficient.

The primary concern was the inability to remove the default underline styling from the appended URL, despite explicitly setting 'text-decoration: none;'. This resulted in an unappealing underline extending beneath the URL in browsers such as Firefox and Chrome.

A Solution for Variable Width Text

The previously suggested solutions employed techniques like padding and background images to circumvent the problematic text decoration property. However, these methods are not applicable when the appended content is variable width text.

To resolve this, modify the display property of the :after pseudo-element to 'inline-block'. This allows the 'text-decoration: none;' declaration to take effect, as demonstrated in the following code:

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

This adjusted CSS ensures that the appended URL displays without any underline, regardless of its width. By applying this workaround, you can effectively append variable width text to links and specify its desired color, thereby addressing the initial concern and providing a more refined printed rendering of URLs.

The above is the detailed content of How to Remove the Underline from Appended URLs with :after and Variable Width Text?. For more information, please follow other related articles on the PHP Chinese website!