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

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

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

・CSS

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

・HTML

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

こんだけです。

仕組み的には、

  • 外側の span で、red と underline を指定
  • 内側の span で、black は指定するが、underline は指定しない

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

って感じです。

IT・ICT

Posted by るな