【CSS】borderの色が途中で変わる二色の下線の作り方

こんにちは、Ryohei（@ityryohei）です！

CSSでborderの色が途中で変わる二色の下線の作り方のご紹介です！

本記事でご紹介するのは下記のような下線の作成方法です。下線に設定したborderの色が途中で変わって二色の線になっているかと思います。

See the Pen
Border Two Color1 | CSS by ryohei (@intotheprogram)
on CodePen.

タイトルやボックス、リンクなど色々なパーツに使えるため汎用性が高く、変化が加わるため部分的に強調する効果も期待できます。

本記事ではborderの色を途中で変えて二色の下線にする方法をご紹介していきます。スタイルの作り方はいくつかありますので、ご紹介できればと思います。

では、解説していきます。

本体と疑似要素のborderを重ねる方法

タイトルやボックスといった基準となる要素にborderを指定し、横幅を持たせた疑似要素にborderとpositionを指定します。本体と疑似要素のborderを重ねることで、途中で色が変わる下線を表現することができます。

HTML

<h2>Into the Program</h2>

CSS

h2 {
  position: relative;
  width: 250px;
  margin: 20px auto;
  padding: 10px;
  color: #ffffff;
  border-bottom: 3px solid #007db9;
}
    
h2:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 70px;
  height: inherit;
  border-bottom: 3px solid #ffffff;
}

下記はborderを重ねて表示したい際のデモです。下線の色が途中で変わって表示されているかと思います。

See the Pen
Border Two Color1 | CSS by ryohei (@intotheprogram)
on CodePen.

疑似要素のborderを重ねる方法

上記はタイトルやボックスの要素に直接borderを指定しましたが、ここでは疑似要素にのみborderを指定して下線の色が途中で変わるスタイルを作ってみます。疑似要素の「before」と「after」の両方を使用し、「before」に長いborderを、「after」に短いborderを指定してそれらを重ねて表現します。

HTML

<h2>Into the Program</h2>

CSS

h2 {
    position: relative;
    width: 250px;
    margin: 20px auto;
    padding: 10px;
    color: #ffffff;
}

h2:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 250px;
    border-bottom: 3px solid #007db9;
}

h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    border-bottom: 3px solid #ffffff;
}

下記は二つの疑似要素の指定したborderを重ねたデモです。上記でご紹介した内容と同様に下線の色が途中で変わって表示されているかと思います。

See the Pen
Border Two Color2 | CSS by ryohei (@intotheprogram)
on CodePen.

疑似要素に高さを持たせて重ねる方法

最後に疑似要素に高さを持たせて重ねる方法です。borderは使用していないのですが、見た目はborderのようになります。二つの疑似要素に低い高さを持たせて背景を指定し、それらを重ねてborderのように表現します。

HTML

<h2>Into the Program</h2>

CSS

h2 {
  position: relative;
  width: 250px;
  margin: 20px auto;
  padding: 10px;
  color: #ffffff;
}

h2:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 250px;
  height: 3px;
  background: #007db9;
}

h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 3px;
  background: #ffffff;
}

下記は二つの疑似要素に高さと背景色を指定して重ねて表示した際のデモです。borderは使用していませんが見た目は下線のように見えているかと思います。

See the Pen
Border Two Color3 | CSS by ryohei (@intotheprogram)
on CodePen.

最後に

いかがでしたでしょうか。

CSSでタイトルやボックスのborderを装飾することはよくあるかと思います。本記事を読んでいただいて表現の幅を広げていただければ幸いです。

以上、CSSでborderの色が途中で変わる二色の下線の作り方のご紹介でした！