Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
pseudoelement
markerbox
communitycreator

What is the ::marker pseudo-element in CSS?

Programming Bytes

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

We can use the ::marker pseudo-element to add styles to the marker box of the list item. Here, marker box denotes the:

  • bullet(β€’) added by default for the ulUnordered List HTML Element list-item.
  • numbers added by default for the olOrdered List HTML Element list-item.

Example: Add color to the list items

In the code above:

  • We have created a ul and an ol element, each with three list-item.

  • In the CSS file, we have added style to the marker box of the list item of ul and ol.

ol li::marker {
  content: 'πŸ‘‰πŸ»  ';
}

ul li::marker {    
    content: 'πŸ’™ ';
}

The code above will replace the default number or bullet of the list items with the given content property.


Commonly used CSS properties with ::marker pseudo-element are:

  • the font property.
  • the color property.
  • the content property.

The list of properties which can be used with the ::marker pseudo-element can be found here.


We can use the ::marker pseudo-element on any HTML element that has the display property as a list-item.

In the code above, we:

  • Created three h3 heading elements.
  • Changed the display property of the h3 element to list-item.
  • Used the ::marker psuedo-element to style the marker box.

RELATED TAGS

css
pseudoelement
markerbox
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring