CSSでborderの線の色を途中から変更する方法

border-bottomなどで付けた線の色を途中で変える方法をご紹介いたします。

以下のような線を実装することができます。

CSSでborderの線の色を途中から変更する方法

borderの線の色を途中で変えるには、:after疑似要素を使います。CSSは以下の通り。

h2 {
  border-bottom: solid 2px #000;
  position: relative;
}

h2:after {
  content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 30%;
  border-bottom: 2px solid #ff0000;
}

まず、h2要素に指定している「border-bottom: solid 2px #000;」で2pxの黒い線を引いています。

「h2:after」では、「border-bottom: 2px solid #ff0000;」で赤い線を引き、「position: absolute;」と「bottom: -2px;」でh2要素に付いている線と重ねています。「width: 30%;」で赤い線の長さを指定すれば、途中で色が変わる線の完成です。

あとがき

今回はh2要素で説明していますが、他の要素でも同様の方法で線の色を変えることができます。

疑似要素を使えば、以前は画像を設置して表現していたこともCSSで実現できますね。参考になれば幸いです。