Оформление цифр нумерации нумерованных HTML-списков
Цифры нумерации пронумерованного HTML-списка, выделенные жирным начертанием без использования дополнительных тегов HTML и псевдоэлемента ::marker
- List item
- List item
- List item
HTML код:
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
CSS код:
ol {counter-reset: item;}
ol li {display: block;}
ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;}
С помощью этого способа так же возможно вместо точки после цифры использовать и другие знаки. Например, добавить закрывающую круглую ")" или квадратную "]" скобку. Или управлять пробелами между цифрой, разделительным знаком и содержимым, следующим за ними в элементе нумерованного списка.
Поддержка в браузерах
- Windows: Google Chrome 2.0+, Firefox 1.5+, Edge 12.0+, Internet Explorer 8.0+, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, Netscape 9.0+
- Android: Samsung Internet 1.0+, Android Browser 2.1+, WebView Android 4.4+, Chrome Android 18.0+, Firefox for Android 25.0+, Opera Android 10.1+
- iOS: Safari 1.0+
- developer.mozilla.org/en-US/docs/Web/CSS/counter-reset
- developer.mozilla.org/en-US/docs/Web/CSS/counter-increment
- caniuse.com/css-counters
Теги: CSS, CSS-счётчики, HTML, LI, OL, Псевдоэлементы
- Опубликовано: 18 Февраля, 2023
- Последнее редактирование: 18 Февраля, 2023