[CSS] 途中で色が変わるカラフルなborderの作り方

2023-03-06

見出しなどでよく使うこんな感じ↓の下線のデザイン。

見出し

通常border-bottomで作りますが、これを疑似要素やlinear-gradientを使って2色、3色、4色…のカラフルな下線にする方法をまとめます。

1色まで：borderを使う

先ほどのデモのHTML・CSSは次のとおりです。
borderプロパティで1辺に設定できる色は1色までなので、この方法では2色以上の下線を作ることはできません。

見出し

<div class="underline">見出し</div>

.underline{
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 3px solid #f98469;/*ピンク*/
}

3色まで：疑似要素「::before」「::after」を使う

疑似要素::before,::afterを使うと、3色までの下線を作ることができます。

border-bottom-color で1色
疑似要素::beforeのbackground-colorで1色
疑似要素::afterのbackground-colorで1色

2色の場合

::beforeを使って「50% : 50%」で色が変わる下線を作ります。
1色の場合と同様border-bottomを引いておいて、その上に「半分の長さ（50%）・同じ高さ」の疑似要素を乗せています。

見出し

<div class="underline">見出し</div>

.underline{
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  border-bottom: 3px solid #fbd8d0;/*右：薄ピンク*/
}
.underline::before{
  content: '';
  position: absolute;
  bottom: -3px;
  width: 50%;
  height: 3px;
  background: #f98469;/*左：ピンク*/
}

3色の場合

同じ要領で、::afterを追加して「33% : 33% : 33%」で色を変えてみます。

見出し

.underline{
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  border-bottom: 3px solid #ffd12a;/*真ん中：黄色*/
}
.underline::before{
  content: '';
  position: absolute;
  bottom: -3px;
  width: 33.3%;
  height: 3px;
  background: #f98469;/*左：ピンク*/
}
.underline::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 33.3%;
  height: 3px;
  background: #a4de32;/*右：緑*/
}

2色の場合で疑似要素「::before」「::after」のみを使う例

少しオマケ的な例ですが、デザインによっては2色のborderでも疑似要素::beforeと::after両方使うケースがあります。
例えば次のようにテキストの長さ分だけ色を変えるときです。

見出し

テキストが長い見出し

<div class="underline">見出し</div>
<div class="underline">テキストが長い見出し</div>

.underline{
  padding-bottom: 8px;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}
.underline::before{
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #f98469;/*ピンク*/
}
.underline::after{
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #fbd8d0;/*薄ピンク*/
}

4色以上：linear-gradientを使う

4色以上はlinear-gradientのみで色を作ります。
4色なら「100(%) ÷ 4(色)」で、25%ずつ色を変えていきます。

見出し

<div class="underline">見出し</div>

.underline{
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 16px;
  position: relative;
}
.underline::before{
  content: '';
  position: absolute;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right, 
    #f98469 0%, #f98469 25%, /*ピンク*/
    #ffd12a 25%, #ffd12a 50%, /*黄色*/
    #a4de32 50%, #a4de32 75%, /*緑*/
    #91c0f1 75%, #91c0f1 100% /*青*/
  );
}