:after 擬似要素との 'text-decoration' の競合を解決するにはどうすればよいですか?

「text-decoration」との :after 疑似要素の競合を解決する

元々は、リンクの後に画像を追加する問題を解決するために提案されました。 :その後、この質問は可変幅の追加に焦点を当てて再浮上しました。 text.

課題は、コンテンツの表示を維持しながら、「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 全体に広がることがなくなり、望ましい視覚効果が得られます。

以上が:after 擬似要素との 'text-decoration' の競合を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。