Как изменить цвет списка в html. Добавление маркеров или нумерации к тексту. Изменение цвета и стиля маркеров и понимание ограничений

Мы можем комбинировать list-style-image с svg s, который мы можем встроить в css ! Этот метод предлагает невероятный контроль над «пулями», которые могут стать чем угодно.

Чтобы получить красный круг, просто используйте следующий css:

"); }

Но это только начало. Это позволяет нам делать любую сумасшедшую вещь, которую мы хотим с этими пулями. круги или прямоугольники легко, но все, что вы можете нарисовать с помощью svg , можете зайти туда! Посмотрите пример яблочного яблока ниже:

ul { list-style-image: url("data:image/svg+xml,"); } ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul.bulls-eye { list-style-image: url("data:image/svg+xml,"); } ul.multi-color { list-style-image: url("data:image/svg+xml,"); }

  • Big circles!
    • Big rectangles!
    • b
      • Small circles!
      • c
        • Small rectangles!
  • Bulls
  • eyes.
  • Multi
  • color

Ширина / высота атрибутов

Для некоторых браузеров требуются атрибуты width и height которые должны быть установлены на , или они ничего не отображают. На момент написания этой статьи последние версии Firefox демонстрируют эту проблему. Я установил оба атрибута в примерах.

Кодировки

Спецификация data-uri , которая ссылается на




Top