黒文字のままで赤色の下線を引く HTML と CSS の書き方

2015年10月22日

やり方が分からんって人もいるみたいなので、書いておく。

黒文字のままで 赤色の下線を引く CSS

・CSS

.red {
    color: #ff0000;
}
.black{
    color: #000;
}
.underline {
    text-decoration: underline;
}

・HTML

<span class="red underline"><span class="black">赤色の下線を引く</span></span>

こんだけです。

仕組み的には、

内側の black の指定が優先されるので文字は黒くなるけど、
underline は外側の red で指定した色のままなので、赤線になる。

って感じです。