`::marker` CSS-псевдоэлемент

::marker — CSS-псевдоэлемент, который выбирает область маркера элемента списка, обычно содержащую маркер или номер. Он работает с любым элементом или псевдоэлементом, для которого задано значение display: list-item, например с элементами <li> и <summary>.

Попробуйте

li::marker {
  content: "✝ ";
  font-size: 1.2em;
}

<p>Group known as Mercury Seven:</p>
<ul>
  <li>Malcolm Scott Carpenter</li>
  <li>Leroy Gordon (Gordo) Cooper Jr.</li>
  <li>John Herschel Glenn Jr.</li>
  <li>Virgil Ivan (Gus) Grissom</li>
  <li>Walter Marty (Wally) Schirra Jr.</li>
  <li>Alan Bartlett Shepard Jr.</li>
  <li>Donald Kent (Deke) Slayton</li>
</ul>

Допустимые свойства

Псевдоэлемент ::marker поддерживает ограниченное число свойств CSS, в том числе:

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

Синтаксис

::marker {
  /* ... */
}

Примеры

HTML

<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

CSS

ul li::marker {
  color: red;
  font-size: 1.5em;
}

Результат

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

Совместимость с браузерами

См. также

• Элементы HTML, у которых по умолчанию есть области маркеров: <ol>, <li>, <summary>
• Модуль генерируемого содержимого CSS
• Модуль списков и счётчиков CSS
• Модуль стилей счётчиков CSS