Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
tolerant
8 лет назад

Записки HTML-верстальщика: делаем правильные нумерованные списки (CSS Only)

  Здрасте всем! 

У всех начинающих верстальщиков (и не только) 100% возникала проблема с тем, чтобы стилизовать порядковые номера в нумерованном списке каким-нибудь отдельным стилем. 

Но тут возникала проблема: в стандартных нумерованных списках нельзя отделить стилями цифры счётчика от текста, идущего после них: 

 


Решение: самым первым делом, нам нужно избавиться от стандартного счетчика списка. Это делается легко, свойством для li {list-style:none;}. Затем, самый простой способ - это добавить перед текстом какой-нибудь <span> и в каждом элементе ставить числа 1,2,3,4...и.т.д. 

Но!!! Чаще всего (и это правильно) нужно сделать так, чтобы наш нумерованный список увеличивал число перед текстом автоматически. Это можно сделать на чистом CSS!! В этом помогут нам счётчики CSS. Для нашей задачи достаточно для ol указать свойство {counter-reset: myCounter;} - мы определяем переменную (да-да! Переменную в CSS) myCounter, и сбрасываем её значение. Затем, при помощи этой переменной и псевдоэлементов мы добавляем счетчик перед нашим списком: li:before { counter-increment: myCounter; content:counter(myCounter);} - counter-increment: здесь мы указываем значение переменной, которое будет увеличиваться, ну и content:counter(myCounter) - это контент, который будет отображаться в псевдоэлементе :before. 

Пример того, что может получиться, Вы можете посмотреть тут: 

Мы получили очень даже кроссбраузерный список, в котором элементы автоматически получают свою нумерацию, которую можно стилизовать как вам заблагорассудится. Таким же образом можно создавать вложенные друг в друга списки. А изучив синтаксис свойства counter-increment, начинать список не с первого элемента, выводить четные/нечетные номера элементов и т.д.


Спасибо за внимание :)   

Буду раз ответить всем на Ваши вопросы, буду рад видеть всех и каждого у себя в подписчиках, буду рад увидеть Ваше решение этой проблемы, буду признателен за Ваши лайки и отзывы.

7
17.110 GOLOS
На Golos с November 2016
Комментарии (1)
Сортировать по:
Сначала старые