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