CSSで下線(border-bottom)の色を途中から変更する方法

borderで引いた線は、上下左右で別の色や太さを指定することは出来ますが、基本的には1辺の線の色を途中から変更することはできません。

そうしたい場合は下線用の画像を作成し、背景に設定する方法が一番簡単です。

しかし、CSSのテクニックということで下線(border-bottom)で指定した線の色を途中から変更する（ように見せかける）多少強引な方法をご紹介します。

子要素で下線の色を途中から変更する方法

これは下線を引いた要素の中に子要素を作成し、その子要素を使って途中から色を変える方法です。

HTML

CSS

コード解説

HTMLの div#area1 の要素に対し下線を引きます。

div#area1 に対する下線は青い線で太さは3pxを指定しています。

当然これでは要素の幅だけ青線になり、途中から色が変わることはありません。

#area1の中に.redline要素(子要素)があり、この子要素を使って線の色を途中から変更します。

まず、子要素の位置を指定するため、親要素に position: relative; を指定します(CSS8行目)。

11-13行目 の position: absolute; で子要素の表示位置を指定します。

bottom: -3px;を指定するのは、親要素の下辺から更に3px下に表示し、親要素のborderと重ねるためです。

-3pxというのは、今回はborderが3pxなのでその分という意味です。

そして、right: 0;とwidth: 40%;を指定しているので右から40％分だけとなります。

子要素の border-bottom: 3px solid #ff0000; の 3px は親要素の線と同じ太さにする必要があります。

これで左から60％は青線で、右40％は赤線になります。

サンプルを作成しました。

下のリンクの「エリア1」になります。

after擬似クラスで下線の色を途中から変更する方法

これは下線を引いた要素のafter擬似クラスを使って線の色を途中から変更する方法です。

HTMLの子要素を作らない分すっきりします。

HTML

CSS

コード解説

子要素かafterを使うかの違いで、やってることは同じようなものです。

まず div#area2 に対し3pxの青い下線を指定しています。

当然これでは要素の幅だけ青線になり、途中から色が変わることはありません。

次にafterの位置を指定するため、親要素に position: relative; を指定します(CSS8行目)。

ここまでは子要素を使う方法と同じですね。

11-14行目 の position: absolute; で親要素のafter擬似クラスに対し表示位置を指定します。

bottom: -3px;を指定するのは、親要素の下辺から更に3px下に表示し、親要素のborderと重ねるためです。

-3pxというのは、今回はborderが3pxなのでその分という意味です。

そして、right: 0;とwidth: 40%;を指定しているので右から40％分だけとなります。

子要素の border-bottom: 3px solid #ff0000; の 3px は親要素の線と同じ太さにする必要があります。

これで左から60％は青線で、右40％は赤線になります。

サンプルを作成しました。

下のリンクの「エリア2」になります。

まとめ

CSSでborderの色を途中から変更する方法をご紹介しました。

基本的には子要素かafterを使い、別の色のborderを定義し、positionを使って位置を指定します。

ここまで強引に色を変える必要があるのかどうか分かりませんが、強引にやればこうなります。