数字リストのアレンジ

2021年3月24日2021年7月2日

CSS html コピペ

CSS html

yasuko

旅に出たいなぁ。

Q1　Q2・・・とかいうアレ。

olタグのデフォルト数字スタイルはイマイチ使えない・・・と思いながらカウンタで数字をつけることをいつも調べてしまうので作業メモ

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol{
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}
ol li:before {
  counter-increment: item;
  content: 'Q'counter(item);
}

counter(item,decimal-leading-zero)

とすることで、1～9には0がつきます。

ol li:before {
  counter-increment: item;
  content: 'Q'counter(item,decimal-leading-zero);
}

white-space: pre;　と　\A

を両方指定することでcontent内で改行ができます。

ol li:before {
  counter-increment: item;
  content: 'Q\A'counter(item,decimal-leading-zero);
  white-space: pre;
}

コピペできるようにベーシックなスタイル。