「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 中国語 Web サイトの他の関連記事を参照してください。