Explain Codes LogoExplain Codes Logo

Change the color of a bullet in an HTML list?

html
responsive-design
css
best-practices
Nikita BarsukovbyNikita Barsukov·Dec 24, 2024
TLDR

To change the bullet color in an HTML list, use CSS with the ::before pseudo-element. Here, we set list-style-type to none on the <ul> element to remove the default bullets, and apply a custom bullet styled with color using the content property. Check out the example:

ul { list-style-type: none; // Original bullets, we don't need you! } li::before { content: '•'; // Bullet, with a sense of style color: red; // Bulls-eye is red! padding-right: 8px; // A little personal space, please. }

This approach ensures the bullets appear red, appearing separate from text color.

Deep dive: Enhancing list bullet styles

Creating custom bullet styles with ::before

Let's go fancy and use Unicode characters or even emojis as custom bullets:

li::before { content: '\1F539'; /* Who needs boring bullets, when you have 🔹! */ color: blue; /* Look! A shiny blue bullet! */ font-size: 20px; /* Size does matter. */ vertical-align: middle; /* Standing tall. */ padding-right: 10px; /* Social distancing from text. */ }

Positioning the royal bullets

Positioning and alignment rule a bullet's world! Tweaking the ::before content is needed to ensure a perfect match with the text:

li::before { content: '⚪'; /* New day, new bullet shape! */ color: green; /* Hulk smash! But in a cute bullet form. */ display: inline-block; /* Standing in line. Respect! */ width: 10px; /* Getting the size right. */ margin-left: -20px; /* I like to stay on the left. Don't judge me! */ text-align: center; /* OCD satisfaction:✔️ */ }

Seeing the text in a new light

Encapsulate your list item text within a <span> for making it stylish:

li span { color: black; /* Emo is the new chic. */ font-weight: bold; /* "I'm not fat, I'm BOLD!" - Text */ }

Picture-perfect custom bullets without images

Images for bullets? Nah, we're all about CSS and accessibility. Plus, we love being flexible and maintainable:

li::before { content: '•'; /* Because, why not go old-school? */ color: purple; /* But with a dash of purple rain! */ font-size: inherit; /* Give me the size I deserve! */ }

Colors in lists: Points to ponder

Differentiating bullet importance with colors

Use varying colors for bullets to highlight the list's VIPs:

li.important::before { color: gold; /* Golden bullet for golden words. */ }

Improving list item readability

For easier reading, especially with long lists or detailed list items, use CSS properties like line-height and margin-bottom:

li { line-height: 1.6; /* Line dancing lessons pay off. */ margin-bottom: 5px; /* Breathe easy with this space. */ }

Making friends with cross-browser compatibility

CSS ::before pseudo-element might be a diva with older versions of IE. Be sure to test them or, better, offer fallbacks for older browsers. Take wise decisions while choosing Unicode symbols for cross-browser compatibility:

li::before { content: '•'; /* Oldies but goodies! */ color: red; /* Because Indians love 'Red'. */ }