為什麼「text-decoration: none」不適用於印刷媒體中連結的 :after 偽元素？

重訪：使用「text-decoration」和「:after」偽元素

嘗試解決現有問題，提出了問題：為什麼「text-decoration: none」屬性在與「:after」偽元素一起使用以將文字附加到連結時似乎無效？具體來說，在印刷媒體中，期望的結果是在連結文字之後顯示 URL，而沒有任何分散注意力的下劃線。

最初的問題集中於附加固定大小的圖像，但此查詢在內容時尋求解決方案是可變寬度文字。由於先前的答案建議使用不適合文字內容的填充和背景圖像，因此尋求替代方法。

答案：

解決方案在於應用將「display: inline-block」屬性設為「:after」偽元素。透過這樣做，可以有效地使用「text-decoration: none」屬性來刪除任何底線。

為了演示，以下程式碼現在可以按預期工作：

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

這有在 Chrome 25 和 Firefox 19 中進行了測試，成功隱藏下劃線，同時仍然顯示 URL 文字。

以上是為什麼「text-decoration: none」不適用於印刷媒體中連結的 :after 偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！