:: маркер - 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