【CSS】z-indexやabsoluteを使わずに見出しの左右に線を入れる方法

z-indexやabsoluteを使わずに見出しの左右に線を入れる方法をご紹介します。

【CSS】見出しの左右に線を入れる方法

ポイントとしてはflexboxを使用します。

例を見てみます。

See the Pen how-to-draw-lines-on-both-sides-on-heading by Takuma (@takushin0202) on CodePen.

z-indexやabsoluteを使わずに左右に線を並べることができていますね。

CSSもご覧のようにかなり少なめの記述で済んでいることが分かります。

/* CSS */
h2 {
  display:flex;
  align-items:center; /* 線を上下中央揃えに */
  justify-content:center; /* テキスト等を左右中央揃えに */
}

h2 span {
  padding:0 20px; /* 文字と線の間にスペースを設けるために指定 */
}

h2::before,
h2::after {
  content:""; /* contentは必ず指定 */
  height:1px;
  width:10%;
  background:#333;
}

初心者の頃は擬似要素にtopとtransformの指定、z-indexを使用してテキストが前に出るようにしたりしがちですが、この方法であればコード量もかなり少ない形で意図したスタイルを実現できています。

ちなみに擬似要素の使用でよく見かける親要素へのposition: relative;の指定や、擬似要素へのabosoluteの指定がなくともテキストの前後に配置できています。

これは::beforeに関しては「選択した要素の最初の子要素として擬似要素を生成」、::afterに関しては「選択した要素の最後の子要素として擬似要素を生成」という性質があるため、absoluteで配置を指定する必要がなく、またフレックスボックスのalign-items等で中央寄せができていることも理由の一つです。

詳しい内容等についてはmdnをご覧ください。

以上ご参考になれば幸いです。