Why Does 'text-decoration: none' Fail to Remove Underlines from Links When Using the ':after' Pseudo-Element in Printed Media?

Revisiting the Role of "text-decoration" and the ":after" Pseudo-Element in Printed Media Stylization

In the realm of print styling, the desire to display supplementary information after links using the ":after" pseudo-element often arises. However, achieving this seemingly straightforward task can present challenges. Notably, the "text-decoration" property, intended to remove the default underline from links, has been observed to exhibit unexpected behavior in some browsers.

Initial Approach: Encountering Issues

In an initial attempt to append URLs after links using the ":after" pseudo-element, the following stylesheet was employed:

a:after {
  content: " <" attr(href) ">";
  text-decoration: none;
}

To the dismay of the user, this approach proved unsuccessful. In Firefox and Chrome, the "text-decoration: none" declaration was ignored, resulting in an unsightly underline extending across the bottom of the displayed URL.

Solving the Dilemma: Introducing "display: inline-block"

经过一番探索， the user stumbled upon a solution that addressed the issue. By applying "display: inline-block" to the ":after" pseudo-element, the "text-decoration" property began to function as expected.

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

This modification ensures that the content added after the links is displayed as an inline block, allowing the "text-decoration" property to effectively remove the underline, irrespective of the browser used.

The above is the detailed content of Why Does 'text-decoration: none' Fail to Remove Underlines from Links When Using the ':after' Pseudo-Element in Printed Media?. For more information, please follow other related articles on the PHP Chinese website!