web-dev-qa-db-ja.com

CSSテキスト装飾の下線色

重複している可能性があります：
下線の色を変える

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

csstext-decorations
90
Wizard

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

あなたはたぶんこれを必要とします、あなたのWordを境界下に設定することによって。

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

あなたがあなたのテキストを次のようなスパンにラップするなら、あなたはそれをすることができます：

a {
  color: #258;
  text-decoration: underline;
}
span {
  color: #d43;
  text-decoration: none;
}
<a href="#">
  <span>Text</span>
</a>
116
Cherusker

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

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}
<div>
    <span class="underline">hello world</span>
</div>
15
Luis

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

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; }

それが役に立てば幸い。

5
codenighter