Learn how to change bullet colors for lists with CSS. W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2025 by Refsnes Data. All Rights Reserved.

The <li> tag defines a list item. The <li> tag is used inside ordered lists, unordered lists , and in menu lists . In <ul> and <menu>, the list items will usually be displayed with bullet points. In <ol>, the list items will usually be displayed with numbers or letters. Tip: Use CSS to style lists.

Jun 8, 2016 · Use the following rule: color: red; This matches a tags inside of li tags with class c2 inside of div tags with class c1. For added uniqueness, you might want to give the a tag its own class name. Also, li tags should only appear inside of list tags. (ul or ol). Did you mean <li class="c1">? color: red; The following code will do (very specific).

Nov 13, 2015 · you have to set same color for both 'li' and anchor tag using css. use the below css to set your favourite colour. li { color:blue; } a { color:blue; } i hope it may help you.

Jun 17, 2018 · You could quite simply specify the CSS color property on the li tag and specify a different color on a child element, for example: li {color: red;} li > span {color: black;} Using a Unicode Character as the Bullet

Say we use a counter called 'li'. We first set it to zero on the OL element: ol {list-style: none; counter-reset: li} And then we use it like we did the bullet above: li::before {content: counter(li); color: red; display: inline-block; width: 1em; margin-left: -1em}

We can also style lists with colors, to make them look a little more interesting. Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items: This example demonstrates how to create a list with a red left border.

If you can't modify your HTML, you can either use list-style-image with a custom-colored dot, or use generated content (i.e. li:before) and color it accordingly (but watch out for list bullet position problems). Here's an example with li:before: /* Text color */ color: black; list-style-type: none; /* Unicode bullet symbol */ content: '\2022 ';

Nov 14, 2019 · ol { list-style: none; counter-reset: my-awesome-counter; } ol li { counter-increment: my-awesome-counter; } ol li::before { content: counter(my-awesome-counter) ". "; color: red; } Quick aside here: this doesn’t help with the color, but you can specify what character to use for the bullet by setting a string, like:

Mar 3, 2025 · The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item , such as the <li> and <summary> elements.