【CSS】擬似要素を文字とかさねてオシャレな見出しをつくろう

おしゃれな見出しをつくりたいけど何かいい方法はないかな？

という疑問にお答えします。

ということで今回は擬似要素を使って見出しをオシャレにする方法です。

先日WEBサイトを作成していたら、「なるほど」と思った見出しがありましたので、メモとして記事にしておきます。

それではさっそく見ていきましょう。

数字を重ねた見出し

ページ内に見出しが複数あって、それぞれの見出しに番号がふってあるタイプです。

下のコードを見てください。

よく見ると、数字が見出しの後ろ側にきていて重なってますよね。

See the Pen
gijyouso--z-index by t.h (@tomtom15)
on CodePen.

まず擬似要素で「01」を表示させ、その「01」に対して「ｚ-index: -1 ;」を設定して、見出しよりも後ろ側に配置しました。

いかがでしょうか。簡単ですよね。

ちょっとしたアクセントになりますので是非みなさんもやってみてください。
もちろん数字のところを自分のお好みでラインにしたり、画像に置き換えてもＯＫです。

タイトル関連の記事も紹介しておきます。参考にどうぞ。