CODEWITHSUNDEEP
htmlcss
Gazzer
Gazzer

Reputation: 4646

How do I add background color to items in a list

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.

Upvotes: 6

Views: 26161

Answers (5)

Manthan
Manthan

Reputation: 63

Here is your body part

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

and here goes the CSS part

li.odd{
    background-color: #FF851B;
}
li.even{
    background-color: #FF4136;
}

Upvotes: 0

terribleuser
terribleuser

Reputation: 111

display: block;

Here's a codepen demonstrating how to style list items: http://codepen.io/anon/pen/qdwGXa

Upvotes: 0

Olly Hodgson
Olly Hodgson

Reputation: 15775

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.

Upvotes: 2

Karel Petranek
Karel Petranek

Reputation: 15154

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

Upvotes: 6

second
second

Reputation: 28637

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

Upvotes: 2

Related Questions