Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Август, 2018

Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь контейнера

  • вкладываем тег , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
    • текст
    • создаем конструкцию

    • текст
    • . При этом цвет маркеров определяется стилевым параметром color для селектора LI, а цвет текста — для селектора SPAN.

      Пример

      Цвет текста и маркеров в списке LI {  color: green; } LI SPAN {  color: navy; }

         

      • Скрипка
      •  

      • Гитара
      •  

      • Волынка
      •  

      • Шарманка
      •  

      • Челеста

      Результат данного примера показан ниже.

      Маркеры, отличающиеся по цвету от основного текста

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

      Смысл в следующем — убираем оригинальные маркеры списка через атрибут list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента before и параметра content. Такая связка называется «генерируемое содержание» и позволяет вставлять любой текст или символ перед элементом, в данном случае LI. Причем видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере. Здесь в качестве маркеров используется символ параграфа ¶.

      Пример

      Цвет текста и маркеров в списке LI {  color: red;  list-style-type: none; } LI:before {  color: black;  content: «\00B6 «; }

         

      • Север
      •  

      • Юг
      •  

      • Запад
      •  

      • Восток

      Результат данного примера показан ниже.

      Маркеры, созданные с помощью стилей

      Учтите, что псевдоэлемент before и атрибут content не поддерживаются в браузере Internet Explorer ни в одной его версии. Зато прекрасно работают в Firefox и Opera.