TECH BOX

Technology blog from Web Engineer

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

疑似要素でリスト整形

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

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

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

See the Pen 疑似要素でリスト整形 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

CSSは簡単です。

See the Pen 疑似要素でリスト整形 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

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

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