Why Doesn't 'text-decoration: none' Work on :after Pseudo-elements for Links in Print Media?

Revisited: Using “text-decoration” and the “:after” Pseudo-element

In an attempt to resolve an existing issue, the question is raised: why does the "text-decoration: none" property seem ineffective when used with the ":after" pseudo-element to append text to a link? Specifically, in printed media, the desired result is to display the URL after the link text, without any distracting underlining.

The original question focused on appending fixed-size images, but this query seeks a solution when the content is variable-width text. As previous answers suggested using padding and background images, which are not suitable for text content, an alternative approach is sought.

Answer:

The solution lies in applying the "display: inline-block" property to the ":after" pseudo-element. By doing so, the "text-decoration: none" property can be used effectively to remove any underlining.

To demonstrate, the following code now works as expected:

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

This has been tested in Chrome 25 and Firefox 19, and it successfully hides the underline while still displaying the URL text.

The above is the detailed content of Why Doesn't 'text-decoration: none' Work on :after Pseudo-elements for Links in Print Media?. For more information, please follow other related articles on the PHP Chinese website!