:after および可変幅テキストを使用して追加された URL から下線を削除するにはどうすればよいですか?

テキスト装飾と :after 擬似要素のアドレス指定

以前の問い合わせでは、:after 擬似クラスを使用して印刷されたスタイル シート内のリンクに URL を追加する問題が発生しました。

主な懸念は、'text-decoration: none;' を明示的に設定しているにもかかわらず、追加された URL からデフォルトの下線スタイルを削除できないことでした。この結果、Firefox や Chrome などのブラウザでは、URL の下に魅力のない下線が伸びてしまいます。

可変幅テキストの解決策

以前に提案された解決策では、パディングなどの技術が使用されていました。問題のあるテキスト装飾プロパティを回避するための背景画像。ただし、追加されたコンテンツが可変幅テキストである場合、これらのメソッドは適用できません。

これを解決するには、:after 疑似要素の表示プロパティを 'inline-block' に変更します。これにより、「text-decoration: none;」が許可されます。次のコードに示すように、宣言が有効になります:

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

この調整された CSS により、追加された URL は幅に関係なく、下線なしで表示されます。この回避策を適用すると、可変幅のテキストを効果的にリンクに追加し、希望の色を指定できるため、最初の懸念に対処し、より洗練された URL の印刷レンダリングを提供できます。

以上が:after および可変幅テキストを使用して追加された URL から下線を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。