olタグ
HTMLで番号付きのリストを使いたい場合は
<ol>タグを使います。自動で上から採番されるのでとっても便利。
こういうやつですね。
- aaa
- bbb
- ccc
HTML
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>このマーカーはわりと好きなように変更できます。標準で用意されているマーカーは以下を参照。
オリジナルマーカー
以下のような採番をしたいときのサンプルです。
a-1. aaa
a-2. bbb
a-3. ccc
CSS
ol {
list-style: none;
}
ol li {
counter-increment: li;
}
ol li::before {
content: 'a-' counter(li) '. ';
}
SCSSで書くと以下のような感じ。
SCSS
ol {
list-style: none;
& > li {
counter-increment: li;
&::before {
content: 'a-' counter(li) '. ';
}
}
}
liに疑似要素::beforeや::afterを使うことでいろいろなオリジナルマーカーを作れます。