The ::marker pseudo-element in CSS allows for the styling of the marker box of a list item, which typically contains a bullet or a number. This provides direct control over the appearance of list markers in both ordered and unordered lists.
Example 1: Basic ::marker Styling
/* Styling the markers of an unordered list */
ul li::marker {
color: #ff5733; /* Sets the marker color to a shade of orange */
font-size: 1.2em; /* Makes the marker slightly larger than the list item text */
}
Explanation
This CSS targets the markers of list items within an unordered list (<ul>). It changes their color to orange and increases their size, making the bullet points more prominent.
Example 2: Changing the ::marker Content
/* Custom marker content for an unordered list */
ul li::marker {
content: '→ '; /* Replaces the default bullet with a right arrow */
color: #c70039; /* Sets the arrow color to a deep red */
}
Explanation
This example uses the content property to replace the default bullet point of an unordered list with a custom arrow symbol. This is a powerful way to customize the look and feel of your lists.
Example 3: Styling ::marker in an Ordered List
/* Styling the markers of an ordered list */
ol li::marker {
font-weight: bold; /* Makes the numbers of the list bold */
color: #333; /* Sets the number color to a dark gray */
}
Explanation
This code targets the numbered markers in an ordered list (<ol>). It makes the numbers bold and changes their color, providing a simple yet effective way to style ordered lists.
Example 4: Using Emojis as ::marker Content
/* Using an emoji as the marker for a list */
ul li::marker {
content: '✅ '; /* Sets a checkmark emoji as the marker */
}
Explanation
This fun example shows how you can use emojis as list markers. The content property is set to a checkmark emoji, which will appear before each list item.
Example 5: Animating the ::marker
/* Adding a simple animation to the markers */
@keyframes color-change {
from { color: #ff5733; }
to { color: #c70039; }
}
li::marker {
animation: color-change 2s infinite alternate; /* Applies a color changing animation */
}
Explanation
This CSS snippet demonstrates how to apply an animation to list markers. The color of the marker will transition between two colors, creating a dynamic and eye-catching effect.
Example 6: Different ::marker for Specific List Items
/* Styling a marker for a specific list item with a class */
.important-item::marker {
content: '★ '; /* A star marker for important items */
color: #ffc300; /* A gold color for the star */
}
Explanation
This example shows how to style the marker of a specific list item by targeting it with a class. This is useful for highlighting certain items within a list, such as a "featured" or "important" item.
Example 7: Combining ::marker with Counters
/* Custom numbered markers using a counter */
ol {
list-style-type: none; /* Removes the default numbering */
counter-reset: my-counter; /* Initializes a custom counter */
}
ol li {
counter-increment: my-counter; /* Increments the counter for each list item */
}
ol li::marker {
content: counter(my-counter) '. '; /* Displays the counter value as the marker */
color: #007bff; /* A blue color for the custom numbers */
}
Explanation
This advanced example demonstrates the use of CSS counters with the ::marker pseudo-element. It creates a custom-styled numbered list, offering more flexibility than the default ordered list styles.