2色の下線を表現するCSS

FRONTEND

2019.04.14

2色の下線を表現するCSS

テキストに2色の下線をつけるCSSを紹介します。

パッと見、画像をつかった方が簡単なのかも知れないですが、レスポンシブの事まで考えるとCSSで制御した方が結局は楽です。

サンプル

疑似要素のwidthで、上の色(サンプルでは#f00)の幅を細かく指定できます。あとは、好みに合わせて色の組み合わせ等を変更してもらえればそのままつかえます。

See the Pen
mgMoxV
by keitasakurai (@mdesignyokohama)
on CodePen.