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

Web

こんにちは、けんです。

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

これを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; /*下線の色*/
}

widthheightで幅と高さを指定し、background-colorで色をつけて線のように見立てています。

位置はposition: absolute;transform: translateX(-50%);の組み合わせテクニックで左右中央寄せしています。

まとめ

inline-block要素にして、テキストの長さまで広がる下線を表示させるのでもいいんですが、個人的には、テキストよりも下線が短い方がさりげない装飾で洗練されたイメージがあります。

もちろんデザインによって「合う」「合わない」はあると思います。小綺麗でシンプルなデザインの時は重宝する見出しのデザインだと思うのでぜひ利用してみてください。