数字リストのアレンジ

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;
}

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