Припустимо Ви хочете змінити виодіт чисел в нумерованому списку, так щоб перед йіфрой слідувала напівкругла дужка. Здавалося б така проста операція але в CSS немає за замовчуванням такої властивості. Але в принципі зробити можна, якщо застосувати нестандартний прийом.
Отже давайте розбиратися.
За замовчуванням нумерований список має певний вид: спочатку йде число, потім точка і після цього через пробіл відображається текст. Така форма написання наочна і зручна, але деякі розробники вважають за краще бачити інший спосіб оформлення нумерації списків. А саме, щоб замість точки йшла закриває дужка, як продемонстровано на малюнку вище або щось подібне.
Стилі дозволяють поміняти вид нумерації списків за допомогою стильових властивостей content і counter-increment. Спочатку для селектора OL потрібно задати counter-reset. item. це потрібно для того, щоб нумерація в кожному новому списку починалася заново. В іншому випадку, нумерація буде продовжена і замість 1,2,3 можна буде побачити 5,6,7. Значення item це унікальний ідентифікатор лічильника, ми його вибираємо самі. Далі необхідно заховати вихідні маркери через стильову властивість list-style-type зі значенням none.
Приклад 1. Створення своєї нумерації
content зі значенням counter (item) виводить число; додаючи дужку, як показано в даному прикладі, отримаємо необхідний вид нумерації. Властивість counter-increment необхідно для збільшення номера списку на одиницю. Зверніть увагу, що всюди використовується один і той же ідентифікатор з ім'ям item. Остаточний код наведено в прикладі 2.
Приклад 2. Зміна виду списку
Наведеними способом можна робити будь-який вид нумерованого списку, наприклад, брати число в квадратні дужки, в стилях при цьому зміниться тільки один рядок.