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

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

CSSでborderの線の色を途中から変更する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

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

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

borderの線の色を途中で切り替える

スポンサードリンク

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で実現できますね。参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。