ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで下線を引かずにURLテキストをアンカーに追加するにはどうすればよいですか?

CSSで下線を引かずにURLテキストをアンカーに追加するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-09 20:06:02367ブラウズ

How to Append URL Text to Anchors without Underlining in CSS?

「text-decoration」と「:after」疑似要素の再検討

このクエリは、アンカー要素をカスタマイズするときに直面する課題を調査します。 CSSの「:after」疑似クラス。具体的には、デフォルトのテキスト装飾に影響を与えずにハイパーリンクの URL を追加し、URL テキストに下線がつかないようにすることが目標です。

「text-decoration: none」宣言を使用しようとしても、下線は残ります。 Firefox や Chrome などのブラウザ。ただし、color プロパティの設定は効果的に機能します。質問者は、元のクエリで説明した固定サイズの画像ではなく、可変幅のテキスト コンテンツに適用できる解決策を求めています。

解決策:

この問題に対処するにはでは、「display: inline-block」プロパティを「:after」疑似要素に適用できます。これにより、「text-decoration」宣言が有効になり、テキストに下線が引かれなくなります。このソリューションは、Chrome バージョン 25 および Firefox バージョン 19 で動作することが確認されています。

以上がCSSで下線を引かずにURLテキストをアンカーに追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。