ホームページ >ウェブフロントエンド >CSSチュートリアル >特定のスパン要素に下線を引かずにリンクのスタイルを設定するにはどうすればよいですか?

特定のスパン要素に下線を引かずにリンクのスタイルを設定するにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-16 13:09:12336ブラウズ

How to Style Links without Underlining a Specific Span Element?

特定の要素に下線を引かないリンクのスタイル設定

下線を使用してリンクのスタイルを設定しようとすると、リンク内の特定の要素を除外したい状況に遭遇することがよくあります。リンクに下線が引かれないようにする。この場合、リンクの残りの部分の下線に影響を与えずに要素 #myspan に特定のスタイルを適用するという課題に直面しました。

この問題を解決するには、次の解決策を検討してください:

要素 #myspan の CSS 宣言を変更し、その表示プロパティを「inline-block」に設定します。この変更により、#myspan がリンク内で独自のスペースを占めるようになり、下線が引かれているテキストから分離されます。

更新された CSS は次のとおりです。

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display: inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

また、次の HTML コード:

<a href="#">A link <span>

これらの変更を加えることで、要素 #myspan は下線の影響を受けなくなります。リンクに適用されるため、リンクの全体的な外観を損なうことなく、リンクを個別にスタイル設定できます。

以上が特定のスパン要素に下線を引かずにリンクのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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