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

Question

重複の可能性：
下線の色を変更する

テキストの下にある線の色だけを変更することは可能ですか？下に青い線が入った赤い文字のようなものを見たいのですが、どうすればいいのかわかりません。

Answer 1

次のようなスパンにテキストをラップすると、それを行うことができます。

a {
  color: red;
  text-decoration: underline;
}
span {
  color: blue;
  text-decoration: none;
}

<a href="#">
  <span>Text</span>
</a>

Answer 2

（他のグーグルの場合、重複した質問からコピー）text-decoration-colorがほとんどの最新のブラウザーでサポートされるようになったため、この回答は古くなっています。

例として、次のCSSルールを使用してこれを行うことができます。

text-decoration-color:green

---

このルールが古いブラウザでサポートされていない場合は、次の解決策を使用できます。

ボーダーボトムで単語を設定する：

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

Answer 3

私の知る限り、それは不可能です...しかし、あなたはこのようなことを試すことができます：

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}

<div>
    <span class="underline">hello world</span>
</div>

Answer 4

線の色を変更することはできません（同じ要素に異なる前景色を指定することはできず、テキストとその装飾は単一の要素を形成します）。ただし、いくつかのトリックがあります。

a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }

また、この方法でいくつかのクールな効果を作ることができます：

a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }

それが役に立てば幸い。