В статье приводится способ реализации решения нумерованного списка со скобками после номера элемента списка.

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

Задача

Сделать специальное оформление нумерованного списка таким образом, чтобы после номера элемента была разделительная скобка (закрывающаяся).

Решение

Стандартным вариантом реализации оформления нумерованного списка считается тот случай, когда разделителем между номером и текстом выступает обычная одинарная точка. Однако некоторые люди привыкли видеть пронумерованный список, в котором после числа стоят скобки. Наверняка такие люди захотят увидеть такое оформление списка и на своем ресурсе, поэтому рассмотрим, как это реализовать.

Изменить текущее представление списка можно применив специальные стилевые свойства. Для начала определим, что каждый наш новый список будет вести отсчет с первого номера. Для этого обращаемся к свойству counter- reset, которому задаем значение item. Указанное значение не является стандартным, а придумывается разработчиком. Оно фиксирует уникальное имя типа счетчика и будет его применять, когда оно будет связываться с другими свойствами. Также не забываем убрать предыдущее оформление списка, иначе получится два вида нумерации в каждом списке. Это осуществляется через команду list-style-type, присваиваем ему значение none.

Теперь, после того, как мы убрали старую нумерацию, необходимо назначить новую. Сделать это можно с помощью псевдокласса :before, он пропишет необходимое нам оформление для списка через команду content. Также надо не забыть указать имя счетчика, который должен применяться при нумерации в связке со свойством counter-increment, которое будет каждый последующий номер списка увеличивать на 1 единицу.

По итогу получим следующий код:

CSS

ol {
    list-style-type: none;
    counter-reset:  item;
   }
li:before {
    content: counter(item) ') ';
    counter-increment: item;
 }

Правильность применения данного решения подтвердит картинка в браузере:

Стоит отметить, что не все браузеры поддерживают такое решение. Я Вам даже предложу угадать какой. Да! Совершенно верно, это неповторимый IE, до 8-ой версии наш старичок не распознает команду content. Поэтому кроссбраузерности применим условные комментарии и укажем свойство list-style-type со значением decimal. На всякий случай покажу, как это должно выглядеть в коде:

CSS

<!--[if lt IE 8]>
  <style>
   ol {
    list-style-type: decimal;
   }
  </style
  <![endif]-->

Напоследок замечу, что такое решение носит универсальный характер. В свойство content необходимо записать удобное Вам обозначение и получится новое уникальное оформление для списка.

В каких браузерах работает?