Псевдоэлемент CSS ::marker

Определение и использование

CSS ::marker Псевдоэлемент используется для установки стиля маркеров списков.

Этот псевдоэлемент подходит для любого элемента, установленного с display: list-item.

Внимание:Следующие свойства могут использоваться с ::marker Использование вместе:

• Все свойства шрифта
• Все анимационные свойства
• Все переходные свойства
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• direction

Пример

Пример 1

Установите цвет и размер шрифта для всех маркеров списков:

::marker {
  font-size: 20px;
  color: red;
}

Попробуйте сами

Пример 2

Установите содержимое, цвет и размер шрифта для маркера элементов списка <ul>:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

Попробуйте сами

Пример 3

Установите элемент <h2> с display: list-item и установите цвет и содержимое для маркера списка:

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

Попробуйте сами

CSS грамматика

::marker {
  css declarations;
}

Технические детали

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдоэлемент.

Соответствующие страницы

Учебное пособие：Псевдоэлементы CSS