Change the Color of a Bullet in a HTML List

Change the color of a bullet in a html list?

The bullet gets its color from the text. So if you want to have a different color bullet than text in your list you'll have to add some markup.

Wrap the list text in a span:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Then modify your style rules slightly:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

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

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.

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

The most common way to do this is something along these lines:

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>

<ul>
  <li><span>first</span></li>
  <li><span>second</span></li>
  <li><span>third</span></li>
</ul>

li {
  float: left;
  margin: 25px;
}
li:nth-child(1) {
  color: red;
}
li:nth-child(2) {
  color: blue;
}
li:nth-child(3) {
  color: green;
}
li span {
  color: black;
}

ul { 
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
  box-shadow:  -2em 0 #f5f5f5
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
}
 

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>
  <li class="gray-bg">
    <p>Line 2</p>
  </li>
  <li class="gray-bg">
    <p>Line 3</p>
  </li>
  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>