解決文本裝飾和:after 偽元素

在早期的詢問中，使用:after 偽類來解決問題提出了將URL附加到列印樣式表中的連結。然而，所提供的答案被證明是不夠的。

主要的問題是無法從附加的 URL 中刪除預設的下劃線樣式，儘管明確設定了「text-decoration: none;」。這導致在 Firefox 和 Chrome 等瀏覽器中，URL 下方出現一條不吸引人的底線。

可變寬度文字的解決方案

先前建議的解決方案採用了填充等技術和背景圖像來規避有問題的文字裝飾屬性。但是，當附加內容為可變寬度文字時，這些方法不適用。

要解決此問題，請將 :after 偽元素的 display 屬性修改為「inline-block」。這允許「文字裝飾：無；」聲明生效，代碼如下：

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

調整後的 CSS 可確保附加的 URL 顯示時沒有任何底線，無論其寬度為何。透過應用此解決方法，您可以有效地將可變寬度文字附加到連結並指定其所需的顏色，從而解決最初的問題並提供更精細的 URL 列印呈現。