How without any spans, divs, etc. make a circle on the side, for example, red, and the text is black?

http://jsfiddle.net/fkkw2Lvr/

ul { list-style-type: disc; color: red; } ul li { color: #000000 } 
 <ul> <li>one</li> <li>two</li> <li>three</li> </ul>

1 answer 1

Use pseudo-elements : before or : after

 ul{ padding: 0; list-style: none; } ul > li{ position: relative; padding-left: 15px; } ul > li:before{ content: ''; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #f00; } ul > li:hover:before{ background: #00f; } 
 <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> </ul>

Feeddle

  • perfectly. Thank you very much. - ModaL