HTML のテキストに色付きの下線を作成する方法

下線の色のカスタマイズ

HTML コーディングでは、テキストに特定の色で下線を引きたいが、その色はそのままにしておくという状況に遭遇することがあります。テキスト自体が別の色になります。この問題は、単一の要素を使用してテキストと下線の両方のスタイルを設定する場合に発生し、色が均一になってしまいます。

この問題に対処するには、最新の CSS3 プロパティ text-decoration-color を利用できます。このプロパティを使用すると、下線の色を個別に制御できるため、同じ要素内にある色のテキストと別の色の下線を作成できます。

CSS コードの例は次のとおりです:

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* for Safari browsers */
  text-decoration-color: red;
}

結果を表示する HTML の例:

<p>Black text with red underline in one element - no wrapper elements here!</p>

この CSS プロパティを実装すると、テキストと下線のスタイルを分割して、追加のラッパーを必要とせずに希望の色のカスタマイズを実現できます。要素。

以上がHTML のテキストに色付きの下線を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。