2021年08月17日(火)

CSSの@counter-styleでリストのマーカーを自由に生成する

• 0
• 0
• 2
• 6

Result

See the Pen
Counter style with @counter-style by kachibito (@kachibito)
on CodePen.

@counter-styleっていうのを昨日知ったのでメモ。リストのマーカーを独自定義できる、というもの。便利そうなので使い方を覚えておこうと思います。

ざっくり、使い方は以下のような感じ

@counter-style hogehoge { system: numeric;/*マーカーの内容*/ symbols:1 2 3;/*実際に表示されるもの。文字でも画像でもOK*/ prefix:"【";/*接頭語*/ suffix: "】 ";/*接尾語*/ } ul{ list-style-type: hogehoge;}/*@counter-styleで決めた名前を指定*/

他にもいろいろ詳細を定義できるようになってるみたいです。

上部動作サンプルなら以下のように。

Ads

css

@counter-style custom-counter-style { ...