How to Append URL Text to Anchors without Underlining in CSS?

Revisiting "text-decoration" and the ":after" Pseudo-Element

The query explores challenges faced when customizing anchor elements using the ":after" pseudo-class in CSS. Specifically, the goal is to append the hyperlink's URL without affecting the default text decoration, ensuring that the URL text remains non-underlined.

Despite attempts using the "text-decoration: none" declaration, the underline persists in browsers like Firefox and Chrome. However, setting the color property works effectively. The questioner seeks a solution applicable to variable-width text content, rather than fixed-size images as discussed in the original query.

Resolution:

To address this issue, the "display: inline-block" property can be applied to the ":after" pseudo-element. This ensures that the "text-decoration" declaration takes effect, resulting in non-underlined text. The solution has been verified to work in Chrome version 25 and Firefox version 19.

The above is the detailed content of How to Append URL Text to Anchors without Underlining in CSS?. For more information, please follow other related articles on the PHP Chinese website!