::marker - CSS Selector

::marker

Summary of characteristics of the ::marker selector

Quick description
A pseudo-element targeting the marker in a list (bullet or number).
Status
Standard
W3C Module
CSS Pseudo-Elements Module
References (W3C)
Document status: WD (Working Draft)

Description of the ::marker pseudo-element.

The pseudo-element ::marker is a selector that targets the bullets or numbers in a list (li tags). Only the bullets or numbers are affected: this selector does not target the text that follows.

::marker also targets the small triangles in a details element. These components are used to reveal their content on demand by the user. The full text of the details component is displayed by clicking on this triangle.

Show more (click the triangle). Full text, which can be shown
or hidden on the user's request.

The only properties you can use with the selector ::marker are the following:

  • The color property.
  • The content property.
  • The font properties (their name starts with font-...).
  • The white-space property.
  • The properties text-combine-upright, unicode-bidi and direction.
  • Animation and transition properties.

Examples of use of pseudo-élément ::marker.

Applying ::marker to bulleted or numbered lists.

The examples below show three uses of ::marker:
    - Number formatting.
    - Using an image.
    - Using a text.

  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
  6. Saturday
  7. Sunday
  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
  • Saturday
  • Sunday
  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
  • Saturday
  • Sunday

Applying ::marker to a details component.

Note: The pseudo-element ::marker allows you to change the appearance of the triangle by replacing it with another character, but then you lose the ability to automatically toggle it on mouse click. So you have to handle that yourself. This is the case in the example below where the :open pseudo-class was used to detect if the component is open, and a different character was applied.

Component details title. Component text, revealed on
request.

The animations applied to ::marker.

Animations and transitions can be applied to the pseudo-elements ::marker, but it doesn't work in all browsers.

  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
  • Saturday
  • Sunday

Browser compatibility with ::marker.

The pseudo-element ::marker is fairly well supported by browsers, but its nesting with ::before or ::after is trickier. Check out the compatibility table below.

Column 1
Pseudo-element (selector) targeting the bullets or numbers of a list, allowing them to be styled or their content to be adjusted.
Column 2
Support by browsers for animations and transitions on the pseudo-element ::marker.
Column 3
Support by browsers for nesting ::marker with ::after and ::before.

Notes:

(1) Safari support is limited to color and font size.

1
::marker
pseudo-element
2
Animations on
::marker
3
Nesting with
::before and ::after
Estimated overall support.
81%
96%
73%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Firefox pour Androïd

Chrome

Edge

Safari

1

Opéra

Safari sur IOS

1

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse

Historic of the ::marker pseudo-element.

See also (other pseudo-elements).

Many pseudo-elements exist in CSS. They are grouped in the specification CSS Pseudo-Elements Module . Here are a few of them, which target a part of the page, or a part of an element.

::file-selector-button
Targets the button in an input box of type file. This button has a different appearance in each browser.
::marker
A pseudo-element targeting the marker in a list (bullet or number).
⚠
::scroll-button()
Langue française
Targets the scroll buttons. The value passed as a parameter more precisely indicates which button should be targeted.