TECH BOX

Technology developer's blog

この記事は1年以上経過しています

疑似要素でリスト整形


2017年06月30日

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

動的な出力な場合はプログラムで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タグなどでも可能です。
文章としての見出しが必要な場合はこの方法は使えません。
あくまで、本文と関係ない補助的な役割のタイトルとして使う場合でのみ使用することをおすすめします。

Write a commets