Comment supprimer le soulignement des URL ajoutées avec :after et texte à largeur variable ?

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!