為什麼在印刷媒體中使用「:after」偽元素時「text-decoration: none」無法移除連結下劃線？

重新檢視「文字裝飾」和「:after」偽元素在印刷媒體風格化中的作用

在領域在印刷樣式中，經常需要使用“:after”偽元素在連結後顯示補充資訊。然而，完成這項看似簡單的任務可能會帶來挑戰。值得注意的是，「text-decoration」屬性（旨在從連結中刪除預設底線）已被觀察到在某些瀏覽器中表現出意外行為。

初始方法：遇到問題

在最初嘗試使用「:after」偽元素在連結後附加URL 時，以下樣式表是受僱：

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

令使用者沮喪的是，這種方法被證明是不成功的。在 Firefox 和 Chrome 中，「text-decoration: none」聲明被忽略，導致顯示的 URL 底部出現難看的底線。

解決困境：引入「display: inline-」 block"

經過一番探索，用戶偶然發現了解決該問題的解決方案。透過將「display : inline-block」套用於「:after」偽元素，「text-decoration」屬性開始如預期運作。

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

此修改可確保在連結顯示為內聯區塊，允許「text -decoration」屬性有效刪除底線，無論使用什麼瀏覽器。

以上是為什麼在印刷媒體中使用「:after」偽元素時「text-decoration: none」無法移除連結下劃線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！