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