なんにもない日の頭の中はこんなもんだったりする

【CSS】olのリストで①、②、③(丸数字)を表示させる

【CSS】olのリストで①、②、③(丸数字)を表示させる

olのリストで①、②、③(丸数字)を表示させる。
何かと使うのでメモ。

サンプル

See the Pen
【CSS】olのリストで①、②、③(丸数字)を表示させる
by 125naroom (@125naroom)
on CodePen.

HTML

丸数字は、環境依存文字で書く。そのまま使うのもありな気もするが。①②③と。

<ol>
    <li><span>&#9312;</span>リスト1のテキストテキストテキストテキストテキスト</li>
    <li><span>&#9313;</span>リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    <li><span>&#9314;</span>リスト3</li>
    <li><span>&#9315;</span>リスト4</li>
    <li><span>&#9316;</span>リスト5</li>
</ol>

CSS

olだけど、list-styleはnoneにする。数字部分をspanで囲んで調整する。少し手間だが使いまわせるので便利。

ol  {
  position: relative;
  margin: 0;
  padding: 0
}
ol li  {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.25em
}
ol li span {
  position: absolute;
  left: 0;
  margin: 0
}

丸数字の参照

表示 数値参照 表示 数値参照
&#9312; &#9322;
&#9313; &#9323;
&#9314; &#9324;
&#9315; &#9325;
&#9316; &#9326;
&#9317; &#9327;
&#9318; &#9328;
&#9319; &#9329;
&#9320; &#9330;
&#9321; &#9331;
いつかのこと

おすすめ

いつかのこと