この記事は最終更新日から7年以上経過しているため正確ではないかもしれません

疑似要素でリスト整形

バージョンリストやリリースノートなど特定の要素を繰り返し出力を行い、かつ最初の要素とそれ以外の要素にタイトルを付けて差別化したいといったことが稀にあります。

動的な出力な場合はプログラムで0番目とそれ以外で分けることも出来ますが、そういうプログラムにするのは面倒だったり、手動ならなおさら書き換えるのが面倒です。

そこで昔からあるCSSの疑似要素を使って下記のような事を実現することができます。

CSSは簡単です。

first-childとnth-child(2)のbeforeにそれぞれテキストを差し込んでborderやpaddingなどで整形をしているだけです。

サンプルはリストタグで行なっていますがdivタグなどでも可能です。
文章としての見出しが必要な場合はこの方法は使えません。
あくまで、本文と関係ない補助的な役割のタイトルとして使う場合でのみ使用することをおすすめします。