---
title: "Changing the color of a bullet in a list?"  
description: "Changing the color of a bullet in a list?"  
author: "Anonymous User"  
published: 2013-08-19  
updated: 2013-08-19  
canonical: https://www.mindstick.com/forum/1408/changing-the-color-of-a-bullet-in-a-list  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Changing the color of a bullet in a list?

Hi!

I have a [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) with changing the [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp) of a bullet in a list.

So I have a list inside a <nav> tag in my [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [file](https://www.mindstick.com/articles/59/encrypting-and-decrypting-files-using-c-sharp):

```
<nav id="top-menu">    <ul>        <li> <a href="">Home</a> </li>        <li><span> <a href="">Products</a> </span></li>        <li> <a href="">Statistics</a> </li>        <li> <a href="">Countries</a> </li>        <li> <a href="">Settings</a> </li>        <li> <a href="">Contacts</a> </li>    </ul></nav> 
```

So as you can see my <nav> tag has an id="top-menu". And one more thing:

<li><span> <a href="">[Products](https://www.mindstick.com/news/2358/apple-will-use-us-made-semiconductors-in-its-products-to-lessen-its-dependency-on-asia)</a> </span></li>

Here you can see that I put a <span> tag inside my bullet.

Here is my CSS file:

```
nav#top-menu {    width: 100%;    height: 33px;    background-color: #696969;    margin: 0;    padding: 0;} #top-menu ul {    display: block;    list-style-type: none;    width: 600px;    margin: 0 auto;    padding: 0;} #top-menu ul li {    margin: 0;    padding: 0;} Then I add this: #top-menu ul li span {    color: black;} 
```

The problem is it doesn't change anything.

In other words for now every bullet in my [navigation menu](https://www.mindstick.com/forum/158677/how-can-create-a-responsive-navigation-menu-that-adapts-to-different-screen-sizes) is white but I want to make "Products" [black](https://yourviews.mindstick.com/view/83102/badi-elaichi-black-cardamom-health-benefits).

What am I [doing wrong](https://answers.mindstick.com/qa/36736/what-are-indians-doing-wrong-on-whatsapp)?

Thanks.

## Replies

### Reply by shreesh chandra shukla

Hi!you should to try this\

to style bullets you could try doing:

ul { list-style: none; }

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


---

Original Source: https://www.mindstick.com/forum/1408/changing-the-color-of-a-bullet-in-a-list

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.