如何解決偽元素後的「文字裝飾」衝突？

解決:after偽元素與「text-decoration」的衝突

最初是為了解決使用連結後附加影像的問題:after ，這個問題再次出現，重點是附加可變寬度文字。

挑戰在於將「text-decoration: none」屬性套用於 :after 偽元素，同時保持其內容顯示。在 Firefox 和 Chrome 中，URL 的下劃線仍然存在，從而抵消了預期的效果。

克服此障礙的關鍵在於為 :after 設定「display: inline-block」屬性。該技術已在 Chrome 25 和 Firefox 19 中成功測試。以下是其工作原理的範例：

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

透過設定“display: inline-block”，您可以有效地將:after 偽元素轉換為類似區塊的元素，允許“text-decoration”屬性按預期生效。此技術可確保下劃線不再延伸穿過 URL，從而產生所需的視覺效果。

以上是如何解決偽元素後的「文字裝飾」衝突？的詳細內容。更多資訊請關注PHP中文網其他相關文章！