テキストから距離を取ったボーダーを疑似要素以外で表現する

はじめに

今までテキストの下にボーダーを引く際、疑似要素を使用していたがもっと楽な方法を教えてもらった。

比較てみた

See the Pen rNWNLEO by PROGBLOG (@progblog-sank) on CodePen.

従来のやり方

//  HTML

<p class="past_way"><span>HELLO WORLD</span></p>

//  SCSS

.past_way {
  span {
    position: relative;
    &:before {
      content: "";
      height: 1px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #EF5350
    }
  }
}

この書き方は慣れているので、特にどうとも思わないが、SCSS で書くとき階層が深くなるため、わかりにくくなりがち。

新しいやり方

//  HTML

<p class="new_way"><span>HELLO NEW WORLD</span></p>

//  SCSS

.new_way {
  text-decoration-line: underline;
  text-decoration-color: #EF5350;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

こちらの方法はシンプルだが、ブラウザの互換性が気になる。

都度、調査する必要があるかもしれない。