Если углубится в спецификацию CSS, то можно натолкнуться на такое понятие как CSS счётчики. Данная фишка позволяет вам автоматически считать какие-то объекты на странице и выводить соответствующий результат. Это может быть очень полезно, если у вас сайт с уроками — где пошагово объясняются рецепты веб программирования, и каждому можно причислить собственный номер. CSS счётчики помогут автоматизировать процесс подсчёта, который можно использовать, к примеру, для подписи номеров изображений. В этом уроке, я продемонстрирую работу CSS счётчиков на примере нумерации параграфов. HTML 1 <section> 2 <p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p> 3 <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p> 4 <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p> 5 <p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p> 6 <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p> 7 </section> В данном HTML фрагменте, каждый параграф представляет собой отдельный шаг, который мы пронумеруем с помощью CSS тремя строчками кода. CSS CSS используют свойство counter-increment. Оно было введено в CSS 2.1. Для того чтобы заюзать данную фишку, сначала нам нужно сбить значение счётчика до 0 ещё до того как что-то было подсчитано, так что, это можно сделать это в body: 1 body { 2 counter-reset: steps; 3 } Данная строчка собьёт значение счётчика до 0 и задаст определённое имя, для того чтобы в будущем мы могли создать и другие счётчики для этой же страницы. Следующий шаг - это использование псевдо класса :before для получения доступа ко всем параграфам, а точнее к их началу. Для того чтобы перед текстом каждого параграфа приписать номер нам нужно увеличить значение счётчика, а затем вывести его. Мы можем приписать не только номер, но и слово. К примеру, “Step ”, а затем значение счётчика: 1 p:before { 2 counter-increment: steps; 3 content: "Step " counter(steps) ": "; 4 } Так же добавим немного стиля самому тексту и префиксу: 01 p { 02 color: #242424; 03 font-family: arial, sans-serif; 04 font-size: 16px; 05 line-height: 20px; 06 } 07 08 p:before { 09 counter-increment: steps; 10 content: "Step " counter(steps) ": "; 11 font-weight: bold; 12 font-size: 18px; 13 } Работу данного кода в действии, можете найти тут.