::marker

::marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.

Создадим ненумерованный список <ul> и установим синий цвет точки для каждого элемента <li>:

        
          
          <ul>  <li>Цвет точек</li>  <li>этого ненумерованного списка</li>  <li>#2e9aff</li></ul>
          <ul>
  <li>Цвет точек</li>
  <li>этого ненумерованного списка</li>
  <li>#2e9aff</li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          li::marker {  color: #2e9aff;}
          li::marker {
  color: #2e9aff;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          li::marker {  color: #2e9aff;}
          li::marker {
  color: #2e9aff;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдоэлемент ::marker работает только на элементах списка.

💡 Для обратной совместимости с CSS 2 браузеры позволяют писать некоторые псевдоэлементы с одним двоеточием, например: ::before, ::after, ::first-letter, ::first-line. Однако псевдоэлемент ::marker необходимо указывать с двумя двоеточиями.

Элемент списка — это любой элемент со свойством display: list-item. Как пример, всем вам знакомый элемент <li> по умолчанию имеет свойство display: list-item.

Каждый новый элемент <li> в списке <ol> или <ul> обозначается маркером.

Псевдоэлемент ::marker — это маркерное поле в котором находится маркер. Маркер может представлять собой символ или порядковый номер.

Например, в нумерованном списке <ol> каждый элемент <li> по умолчанию нумеруется в порядке возрастания. В ненумерованном списке <ul> каждый элемент <li> помечается маркером в виде точки.

Элементы списка автоматически создают псевдоэлемент ::marker, никакие другие элементы этого не делают.

Содержимым этого маркерного поля можно управлять с помощью свойств:

• list-style-type;
• list-style-image;
• list-style-position.

Также есть шорткат list-style, который даёт возможность задать значения для всех этих свойств одновременно.

Только следующие CSS-свойства применяются к маркерному полю:

• свойства text-combine-upright, unicode-bidi и direction;
• свойство content;
• все свойства анимации и переходов.

Наследуемые свойства, которые применяются к тексту, могут быть установлены на псевдоэлемент ::marker, текстовое содержимое псевдоэлемента будет наследовать значения:

• white-space, text-transform, letter-spacing;
• все свойства для работы с текстом (шрифтом);
• свойство color.

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

Воссоздадим искусственный ненумерованный список и попробуем стилизовать псевдоэлемент ::marker элементов <p>:

        
          
          <div class="unordered-list">  <p class="list-item">первый элемент псевдосписка</p>  <p class="list-item">второй элемент псевдосписка</p>  <p class="list-item">третий элемент псевдосписка</p></div>
          <div class="unordered-list">
  <p class="list-item">первый элемент псевдосписка</p>
  <p class="list-item">второй элемент псевдосписка</p>
  <p class="list-item">третий элемент псевдосписка</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .list-item::marker {  content: "🌵";}
          .list-item::marker {
  content: "🌵";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Как видно, маркеры в виде кактусов не появились.

Однако, если указать элементам <p> значение display: list-item:

        
          
          .list-item {  display: list-item;}
          .list-item {
  display: list-item;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Работает!

Псевдоэлемент ::marker элемента списка встаёт перед псевдоэлементом ::before, если он существует в элементе.

Возьмём демку, которая демонстрировалась выше, но немного изменим её CSS:

        
          
          .list-item::marker {  content: "🌚";}.list-item::before {  content: "🌝 ";}
          .list-item::marker {
  content: "🌚";
}

.list-item::before {
  content: "🌝 ";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Браузер решает как в итоге будет выглядеть ::marker по порядку проверяя следующие условия:

1. Будет отображаться указанное значение если свойство content на псевдоэлементе ::marker отличается от значения по умолчанию (normal).
2. Будет отображаться указанное изображение если применено свойство list-style-image на элементе списка.
3. Будет отображаться маркер в виде строки если применено свойство list-style-type на элементе списка.
4. Если ничего из выше перечисленного не выполняется, псевдоэлемент ::marker не создаст поле.

        
          
          li {  color: #2e9aff;}li::marker {  color: #f498ad;  font-weight: bold;}
          li {
  color: #2e9aff;
}

li::marker {
  color: #f498ad;
  font-weight: bold;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          li::marker {  color: aquamarine;}li:last-of-type::marker {  color: tomato;}
          li::marker {
  color: aquamarine;
}

li:last-of-type::marker {
  color: tomato;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать