【CSS】borderの長さは変えられる？文字よりも短い下線を表示させたい【疑似要素で解決】

こんにちは、けんです。

ランディングページなどで、見出しを表示する時、「なんか物足りないな…」と思った時に下線を入れると、下のテキストとメリハリがついて美しくなります。

これをh2などのヘッドライン要素に直接borderで入れようとすると、block要素の場合は幅いっぱいの長さに、inline-block要素の場合は、テキストと同じ長さになります。

block要素の場合

h2 {
  display: block;
  text-align: center;
  border-bottom: 2px solid #666666;
}

ヘッドライン要素に直接border-bottomを適用すると、上の画像の様に幅いっぱいに広がります。

※h2などのヘッドライン要素は、元々block要素なのでdisplay: block;は記述する必要がありませんが、わかりやすいように入れときました。

inline-block要素の場合

h2 {
    display: inline-block;
    text-align: center;
    border-bottom: 2px solid #666666;
}

inline-block要素にした場合です。テキストの長さだけ下線が広がります。

これを下の画像のように「テキストよりも下線の長さを短くしたい！」という時のテクニックを紹介します。

疑似要素(before)で下線を表示させる

テキストよりも短い下線を表示させるために、一番おすすめの方法は、疑似要素で表示させる方法です。

HTMLのhr要素などを使ったり、空のdiv要素を入れてスタイルを適用させて表示させるなどあるのですが、ページ内に無駄なHTMLが増えて、SEO対策としてはあまり良くないのでおすすめしません。

疑似要素はSEOに影響を与えずにWebページを装飾することができます。

h2 {
  display: inline-block;
  position: relative;
}
h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 50px; /*下線の幅*/
  height: 2px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #666666; /*下線の色*/
}