疑似要素で下線を引く | IT工房｜AI入門とWeb開発

テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いものではありません。

今回は疑似要素を使用して下線を引く方法です。この方法なら二重線、三重線にも対応できます。

疑似要素で下線を引く方法

「::before」と「::after」にそれぞれ新しい要素を作成してそれに対して線を引く仕組みです。

疑似要素で下線を引くサンプル

このサンプルではh1要素に疑似要素「::before」と「::after」を使用して「content: “”」で空の要素をひとつ作ります。
「left:0」「right:0」にすることで要素にUAの幅いっぱいを指定します。そしてその空の要素に下線を引きます。
このままだと「::before」に引かれた線と「::after」に引かれた線は重なりますので「::after」の線の位置だけ「bottom: -5px」でずらします。
この値を変更することで二重線の間隔を変更することができます。

HTML

<header class="header">
    <h1 class="heading">Sample</h1>
</header>

CSS

  .header{
    text-align: center;
  }
  .heading {
    display: inline-block;
    position: relative;
  }
  .heading::before,
  .heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #333;
  }
  .heading::after {
    bottom: -5px;
  }

三重線にするには先程のサンプルに少し手を加えるだけです。

疑似要素で三重線を作成するサンプル

二本線は先程のサンプルと同様です。
三本目の線はh1要素自体のborder-bottomです。
今回のサンプルではそれぞれのborderの色を変えることで線の色を変えています。

CSS

   .header {
      text-align: center;
    }

    .heading {
      display: inline-block;
      position: relative;
      border-bottom: 1px solid blue;
    }

    .heading::before,
    .heading::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .heading::after {
      bottom: -5px;
      border-bottom: 1px solid red;
    }

    .heading::before {
      bottom: -9px;
      border-bottom: 1px solid blue;
    }

テキストの両端に線を付ける

疑似要素で下線を付けるだけではなく、テキストの両端に線を付けることもできます。
疑似要素のcontentで空の要素を作成して「display:inline-block」にします。「inline-block」を使用したのはテキストの両端にcontentで作成した空の要素を横並びにするためです。それだけなら「inline」を使用しても良いのですが、今回は線を引くために幅と高さを指定する必要があります。「inline」には「width」と「height」の指定ができません。そのためinline要素の性格を持ちながら「width」と「height」の指定ができる「inline-block」を使用しています。
更に垂直方向中央に表示させるために「vertical-align: middle」を使用します。
widthとheightが線の長さと太さで、background-colorが線の色になります。

テキストの両端に線を付けるサンプル
HTML

<h1 class="heading">Sample</h1>

CSS

    .heading{
      text-align: center;
    }
    .heading::before,.heading::after{
      content:"";
      display:inline-block;
      width:140px;
      height:1px;
      margin:0 3rem;
      background-color: #333;
      vertical-align: middle;
    }