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

Anonim

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

    (наприклад, •) або цифру за замовчуванням
      (наприклад, 1.). Це надзвичайно легко робить такі прості речі, як розфарбувати їх.

      Як і псевдоелемент, ви зможете вибрати ::markerв DevTools для перевірки, але це насправді не "в DOM", як звичайний елемент.

      Chrome DevTools, що виділяє ::markerпсевдоелемент та показує стилі.

      Ви можете поєднувати ::markerз contentвластивістю, щоб змінити, що таке маркер. Наприклад, замінивши маркери списку смайликами:

      Якщо ви змінили display властивість list-itemна будь-який елемент, ви можете контролювати його ::marker. Ось

      елементи пронумеровані, що поєднує в собі ідею лічильників CSS:

      Маркери все ще залишаються маркерами списку, тому на них можуть впливати такі речі list-style-position.

      Пов’язані

      Стаття від 5 травня 2020 року

      Список рецептів стилів

      Кріс Койєр

      Більше інформації

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

      Підтримка браузера

      Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

      Робочий стіл

      Chrome Firefox IE Край Сафарі
      86 68 Ні 86 11.1

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

      Android Chrome Android Firefox Android iOS Safari
      88 85 81 11.3-11.4