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.
以上是如何使用 :after 和可變寬度文字刪除附加 URL 中的底線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
