下線付きのテキストの色を変更するにはどうすればよいですか?

下線付きテキストの色の変更

下線付きのテキストのスタイルを設定したいのはよくあることですが、その下線の色をカスタマイズしたい場合はどうすればよいでしょうか。デフォルトでは、下線はテキストと同じ色を共有しますが、視覚的な魅力を高めるためにこの動作を変更する方法があります。

そうするために、最新のブラウザは text-decoration-color プロパティをサポートするようになりました。簡単な作業。希望の色の値を指定するだけで、下線がその色相になります。

ただし、text-decoration-color をサポートしていない古いブラウザに対応する必要がある場合は、代替ソリューションが存在します。テキストの下に枠線を設定すると、下線のように見せることができます。枠線の色は、他の枠線と同じように制御でき、カスタマイズが可能です。

CSS を使用した例を次に示します。

<code class="css">a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}

a:hover {
  border-bottom-color: green;
}</code>

このアプローチは、どのブラウザーでも確実に機能し、追加する優れた方法です。下線付きのテキストにスタイリッシュなタッチを加えます。

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