::marker

Псевдоэлемент для работы с маркерами элементов списка.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

::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, который даёт возможность задать значения для всех этих свойств одновременно.

Свойства применяемые к маркерному полю

Секция статьи "Свойства применяемые к маркерному полю"

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

Свойства, применяемые к содержимому маркерного поля

Секция статьи "Свойства, применяемые к содержимому маркерного поля"

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

Генерация содержимого маркера

Секция статьи "Генерация содержимого маркера"

Если вы попробуете создать и стилизовать псевдоэлемент ::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 не создаст поле.

На практике

Секция статьи "На практике"

Алексей Степанов советует

Секция статьи "Алексей Степанов советует"

🛠 К сожалению из-за того, что свойств для изменения маркерного поля достаточно мало на данный момент, его не получится как-то по-особому стилизовать. Например, в первой демке в начале доки фактически не используется псевдоэлемент ::marker. Синие маркеры в виде квадратиков сделаны в псевдоэлементе ::before через position: absolute с указанием свойств width и heigth и свойства background-color, данные свойства псевдоэлемент ::marker не поддерживает.

🛠 Используя псевдоэлемент ::marker, маркеры можно стилизовать отдельно от самой контентной части элемента <li>:

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

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

        
        
          
        
      

Или вы можете стилизовать маркер конкретного элемента списка, например, комбинируя псевдоэлемент ::marker с псевдоклассом last-of-type:

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

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

        
        
          
        
      

🛠 Взаимодействовать можно не только с маркерами элементов списка <ul>. Также можно влиять и на элементы списка <ol> при помощи счётчиков в CSS.