:: маркер - CSS-хитрости

Anonim

::marker Псевдо-элемент для укладки стилистических маркеров элемента списка. Например, маркер по умолчанию

    (например, •) или цифру по умолчанию
      (например, 1.). Это позволяет очень легко делать простые вещи, например раскрашивать их.

      Как и ::markerпсевдоэлемент , вы сможете выбрать в DevTools для проверки, но на самом деле он не находится «в DOM», как обычный элемент.

      Chrome DevTools выбирает псевдоэлемент ::markerи показывает стили.

      Вы можете комбинировать ::markerсо contentсвойством, чтобы изменить маркер. Например, замена маркеров списка на эмодзи:

      Если вы измените display свойство list-itemна любой элемент, вы можете управлять им ::marker. Здесь

      элементы пронумерованы, что объединяет идею счетчиков CSS:

      Маркеры по-прежнему являются маркерами списка, поэтому на них распространяются такие вещи, как list-style-position.

      Связанный

      Статья от 5 мая 2020 г.

      Рецепты в стиле списка

      Крис Койер

      Дополнительная информация

      • Спецификация

      Поддержка браузера

      Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

      Рабочий стол

      Хром Fire Fox IE Край Сафари
      86 68 Нет 86 11.1

      Мобильный / планшет

      Android Chrome Android Firefox Android iOS Safari
      88 85 81 год 11,3-11,4