CSS を使用したテキストの下線の色のカスタマイズ

Web デザインでは、情報を強調または強調表示するためにテキストに下線を追加するのが一般的です。ただし、下線の色を変更して独特の雰囲気を加えたい場合はどうすればよいでしょうか。可能ですか?

はい、CSS を使用してテキストの下の線の色を変更することができます。使用できる方法は次の 2 つです。

方法 1: text-decoration-color を使用する

最も簡単な方法は、text-decoration-color プロパティを使用することです。このプロパティは下線の色を指定するため、テキストの色とは独立してカスタマイズできます。

たとえば、青色の下線が付いた赤色のテキストを作成するには、次の CSS を使用します:

text-decoration-color: blue;

方法 2: border-bottom を使用する

別の方法は、border-bottom プロパティを使用することです。このプロパティはテキストの下部に境界線を作成し、下線をシミュレートできます。 border-bottom-color プロパティを設定すると、下線の色を指定できます。

たとえば、border-bottom:

border-bottom: 1px solid blue;
text-decoration: none;

注: text-decoration-color プロパティは、最新のブラウザーでサポートされています。古いブラウザをサポートする必要がある場合は、互換性を確保するために border-bottom メソッドを使用するとよいでしょう。