リストマーカーを使って見出しを※にしてリストにする

liタグを使うことは多いけど(特にメニューの横並び)、リストマーカーを使うことは少ないので少々手間取った。
そもそもliタグの使いみちってこれなんだよね、たぶん。
デフォルトだと「・」がやたらスペースをあけて表示されるけど、デフォルトのまま使っている人はいるのだろうか。

 

See the Pen ※のリスト by takumi (@uchu-jin) on CodePen.

 

時間が無い時はテキストを流し込めば特にタグは必要ないんだけど、見出しの※の下に文章を回り込ませないようにするにはCSSを少し書く必要がある。
細かいけどこういう所まで手をかけているデザインは好き。

 

 

参考:自由なステージ

ul li タグのリストマーカーに好きな文字列を設定する方法