Change color marker li

Question

Hello!

I wonder how I do to change the color of the marker ball <li> via CSS.

From what I read on the Internet, so far I’ve only been able to do this using an image to replace the ball.

Answer 1

You can use the property list-style-image and set an image to replace the polka dots:

ul {
  list-style-image: url('http://i.stack.imgur.com/5kI3v.png')
}

<ul>
  <li>foo</li>
  <li>foo</li>
  <li>foo</li>
</ul>

With this property, it is even possible to make use of SVG inline to create an "image" with the ball (or other shape you prefer). For example:

/**
 * Trocando o atributo "fill" pela cor da sua preferência.
 */

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 10 10"><circle fill="blue" cx="7" cy="7" r="2"/></svg>');
}

<ul>
  <li>foo</li>
  <li>foo</li>
  <li>foo</li>
</ul>

Another alternative is to remove the style from the list and create these balls with the pseudo element :before:

ul {
  list-style: none
}

ul li:before {
  content: '\2022';
  margin: 0 2px;
  color: #e74c3c /* cor da bolinha */
 }

<ul>
  <li>foo</li>
  <li>foo</li>
  <li>foo</li>
</ul>

Answer 2

You can use the following code in the LI css. In color you change the color of the before, ie the color of the ball.

li {
  list-style-type: none;
  position:relative;
  margin-bottom:0.5em;
}
li:before {
  content: '•';
  display: inline-block;
  position: absolute;
  left: -1em;
  color:#00c7ba;
}

Answer 3

The color of the marker ball inherits the color of the list. If you set a color for the list and then subscribe to the color of the list element with some tag, each will have its own color.

ul li{
  color:#f00;
}

ul li span{
  color:#222;
}

<ul>
   <li><span>Linha 01</span></li>
   <li><span>Linha 02</span></li>
   <li><span>Linha 03</span></li>
</ul>

Answer 4

You can put css in ul:

ul {
  list-style-image: url('urlimagem');
}

already resolves ;)