How to Set Bullet Colors in Ul/Li HTML Lists Via CSS Without Using Any Images or Span Tags

ul {  list-style: none;  padding: 0;  margin: 0;}
li {  padding-left: 1em;   text-indent: -.7em;}
li::before {  content: "• ";  color: red; /* or whatever color you prefer */}

<ul>  <li>Foo</li>  <li>Bar</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

Change bullets color of an HTML list without using span

If you can use an image then you can do this. And without an image you won't be able to change the color of the bullets only and not the text.

Using an image

li { list-style-image: url(images/yourimage.jpg); }

See

list-style-image

Without using an image

Then you have to edit the HTML markup and include a span inside the list and color the li and span with different colors.

change html li tag bullet color in css

I would recommend diving into the CSS to do this. Like you could do something like this:

CSS

ul {
list-style: none; /*removes the default bullets*/
}

ul li::before {
content: "(find a bullet from online and copy/paste it here)";
color: "(whatever color you want)";
font-weight: "(if you want it to be bold or italicized)";
display: inline-block; /*for spacing purposes*/
width: 1em; /*Also for spacing but you can change it to whatever*/
margin-left: -1em; /*Also for spacing*/
}

Color of li bullet only

Another approach that allows to to make LI "dot" via CSS shape - you can customize shape, size etc.

For example the code below will display large red circle:

li:before {
    content: "";
    position:relative;
    left: -10px;
    background-color:red;

    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%
}

Demo: http://jsfiddle.net/LWHYJ/

How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

Here is a possibility using the counter-reset / counter-increment properties:

ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
    counter-increment:list;
    content:counter(list, lower-alpha) ". ";
    color:red;
}

see fiddle: http://jsfiddle.net/jRVH5/14/

Change the bullet color of list

Example JS Fiddle

Bullets take the color property of the list:

.listStyle {
    color: red;
}

Note if you want your list text to be a different colour, you have to wrap it in say, a p, for example:

.listStyle p {
    color: black;
}

Example HTML:

<ul class="listStyle">
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
</ul>

Changing the color of a bullet in a list?

to style bullets you could try doing:

    ul { list-style: none; }

    li:before { content:"\2022 \00A0"; color: blue; }

DEMO

---

Related Topics