Change marker color li

Navigation
2

Hello

I would like to know how I can change the color of the marker ball <li> via CSS.

For what I read on the internet, so far I've only been able to do this using an image to replace the ball.

    
asked by anonymous 26.02.2016 / 18:30

3 answers

4

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

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, you can even use SVG inline to create an "image" with the ball (or whatever 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 polka dots with the pseudo < strong> :before : 

ul {
  list-style: none
}

ul li:before {
  content: '22';
  margin: 0 2px;
  color: #e74c3c /* cor da bolinha */
 }
<ul>
  <li>foo</li>
  <li>foo</li>
  <li>foo</li>
</ul>
    
26.02.2016 / 18:37
1

You can use the following code in the LI css. In color you change the color of the before, that is, 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;
}
    
26.02.2016 / 18:33
1

You can by css in ul: 

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

Already solves;)

    
18.03.2016 / 15:41
How to find out the source of the request in PHP? What are the attributes in the html tag?