CSSで下線の色を変更するにはどうすればよいですか?

CSS テキスト装飾の下線の色

Web 開発では、テキストの下線を様式化したい場合があります。この記事では、テキスト行の下の下線の色を変更して、独特の視覚効果を作成するという課題について説明します。

解決策 1: text-decoration-color (最新のブラウザ)

text-decoration-color プロパティをサポートする最新のブラウザの場合は、次の CSS ルールを適用するだけです:

text-decoration-color: green;

このメソッドでは、下線の色を直接指定できます。

解決策 2: border-bottom (古いブラウザ)

text-decoration-color プロパティが古いブラウザでサポートされていない場合、別のアプローチは border-bottom プロパティを利用することです。

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

このアプローチでは、テキストの下部に色付きの境界線を追加し、下線の外観を効果的に模倣します。

以上がCSSで下線の色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。