How do I add background color to items in a list

Question

I have an ordered list

<ol>
<li class="odd">Lorem ipsum dolor sit amet, consectetur ...</li>
<li class="even">Some more text</li>
</ol>

To look something like this:

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
2. Some more text

I want the list to have list-position: outside so the numbers overhang (as they do on this page) but have the background of each list item (which alternate) cover the numbers as well.

Answer 1

As the "outside" name suggests, the numbers are placed outside the element so you cannot affect them with li's background color. A workaround for this may be using an additional div inside the li:

<ol>
<li><div>Lorem ipsum dolor sit amet, consectetur ...</div></li>
<li><div>Some more text ...</div></li>
</ol>

Then add the following CSS for the div:

ol li div  {
  width: 100%;
  height: 100%;
  background-color: #FFAAAA;
  margin-left: -20px;
  padding-left: 20px;
}

This will move the div to appear under the number (that's the -20px value) and the text in it back to the right place (that 20px value).

Answer 2

instead of using outside, could you use list-position: inside, set the background, and then use a negative left margin to push it out?

Answer 3

One option to try is text-indent, e.g.

li {
    list-style-position: inside;
    text-indent: -1em;
    padding: 10px 2em;
    background-color: lime;
}
li.odd {
    background-color: aqua;
}

I've used a negative text-indent to pull the first line of text out, and then left padding to pull everything back into alignment. You might need to play with the text indent and padding values a bit. I've only tested this with list items with single-digit numbers.