Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка

Оцените материал
(0 голосов)

 

Проблема

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

Итак давайте разбираться.

Решение

По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рисунке выше или нечто подобное.

Стили позволяют поменять вид нумерации списков с помощью стилевых свойств content и counter-increment. Вначале для селектора OL требуется задать counter-resetitem, это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счетчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none.

Свойство content само по себе не используется, как правило, оно работает в сочетании с псевдоэлементами :after и :before. Так, конструкция li:before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 1).

Пример 1. Создание своей нумерации

li:before {
  content: counter(item) ') '; /* Добавляем к числам скобку */
  counter-increment: item; /* Задаём имя счетчика */
}

content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. Свойство counter-increment необходимо для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код приведен в примере 2.

Пример 2. Изменение вида списка


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   ol {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset:  item; /* Обнуляем счетчик списка */
   }
   li:before {
    content: counter(item) ') '; /* Добавляем к числам скобку */
    counter-increment: item; /* Задаём имя счетчика */
   }
  </style>
  <!--[if lt IE 8]> 
  <style>
   ol {
    list-style-type: decimal;
   }
  </style
  <![endif]--> 
 </head>
 <body>
  <ol>
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ol>
 </body>
</html>

Браузер Internet Explorer до версии 8.0 не поддерживает свойство content. Чтобы не получилось явного различия при выводе списка в разных браузерах, специально для Internet Explorer в данном примере через условные комментарии добавлено свойство list-style-type со значением decimal. Эта запись выводит традиционную нумерацию строк.

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

content: '[' counter(item) '] ';

 

Прочитано 141 раз Последнее изменение Воскресенье, 02 июля 2017 11:42
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+