how to change background color of unordered list that includes the bullet

Question

I want to color the background of an unordered list in such a way that the bullet also has that background color. Right now, the text has the background color, but the bullet seems to float to its left. I don't want to specify list-style-position: inside; because I want the text to line up to the right of the bullet. Here is my code:

 ul { /*list-style-position: outside;*/ list-style-type: square; } ul li { margin-bottom: 10px; } .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>

Answer 1

You can use the ::before selector, which will position our "fake" bullet on top of the background. Also, if you then want to get rid of the gap to the left, you can add margin: 0; padding: 0; margin: 0; padding: 0; to your ul element.

 ul { /*list-style-position: outside;*/ list-style-type: square; } ul li { margin-bottom: 10px; } .gray-bg { background-color: #F5F5F5; padding: 10px; list-style: none; } .gray-bg p { display: inline-block; margin-left: 20px; } .gray-bg::before { content: "\\2BC0"; }

 <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>

Answer 2

If the bg is a plain background-color, then box-shadow can do the trick.

 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>

if you need a border, filter could help

 ul { list-style-type: square; } ul li { margin-bottom: 10px; box-shadow: -2em 0 #f5f5f5; filter: drop-shadow(2px 0) drop-shadow(-2px 0) drop-shadow( 0 2px) drop-shadow(0 -2px) } .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>