Background color on just bullet part of <li> tag

Question

I'm trying to create a bulleted list where the background color of just the left-margin (bullet) of the tag has a background color. I've tried in vain to find a solution online, just wondering if any CSS experts can suggest a solution?

Answer 1

Is that right what you want? This code makes red background color on left of li tag

<style>
    ul{background-color: red;}
    li{margin-left: 10px; background-color:white;}
</style>


<ul>
    <li> aaaaa </li>
    <li> bbbb <li>
</ul>

Answer 2

If you want to use transparent backgrounds (which you can't with the other two proposed answers), an alternative approach is to use pseudo elements.

 ul { padding-left: 20px; } li { position: relative; } li:before { background: blue; content: ""; display: block; position: absolute; height: 100%; width: 20px; margin-left: -20px; z-index: -1; } 

 <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> 

Answer 3

HTML:

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

CSS:

ul{background:coral}
li{background:green}

jsFiddle