Applying CSS to ordered list - background colour under numbers?

Question

I have an ordered list which I have styled in two ways:

1. Coloured the numbers differently to the list text
2. Applied a background colour and border to each list item

See the list on the right hand side of this page

The numbers are made orange by first applying the orange style to the <li>, then applying the black style to the list text only using jQuery:

jQuery('#secondary ol li').wrapInner('<span class="notes"> </span>');

I would prefer to use CSS only, but hey.

So the remaining issue is how to extend the background colour/border under the numbers too.

Thanks for checking out my question!

Ethylethylate

What numbers do you want to style? – Nidifugous

Sorry that wasn't clear! The numbers in the list on the right hand side. Will edit my question. Thanks. – Ethylethylate

Answer 1

Revised Answer: jsFiddle Pure CSS Solution

Here is a revised method that does not use the OP's original jQuery framework, a request that was not fulfilled in my previous answer. That method used existing jQuery to apply a span wrapper for the li element since direct HTML modification was not possible.

This new method uses CSS Pseudo selectors :before and :after along with CSS 2.1 counter function that can have it's number list stylized so that no jQuery wrapper is needed. In fact, the jsFiddle revision shows the numbers using Google @font-face font.

Using the CSS counter function is done by declaring a variable name to use in the ul element, then incrementing the counter in the :before element as well as using it as actual content.

Simple Example: jsFiddle CSS Counter

HTML:

<ul>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
</ul>

CSS:

ul{
    list-style-type: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 210px;
    height: 200px;
    overflow: auto;
    border: 3px solid royalblue;
    /* Setup the counter. */
    counter-reset: yourVariableName;
}
li:before{
    /* Advance the number. */
    counter-increment: yourVariableName;
    /* Use the counter number as content. */
    content: 'Item ' counter(yourVariableName) ': ';
    color: royalBlue;
    font-family: 'Impact';
}

More about CSS counters HERE.

My original dated answer that uses existing framework in OP's question is shown below.

---

I looked at your Question carefully and then looked at your webpage.

Here is the solution you need: jsFiddle

To summarize, this are the replacement CSS Rules that make it work:

#secondary ol {
    color:#F60;
    margin-bottom:0;
    margin-left: 0px;   /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
    list-style-position: inside;  /* This will place the number on top and inside of the current color of li */
}

.notes{
    color:#333;
    width: 230px;
    heigh: 50px;
    display: inline-block;
    vertical-align:text-top;
}

Result:

---

Extra: This variant example emphasizes the numbers: jsFiddle

Unglue

Thank you arttronics! I had pretty much given up on this! – Ethylethylate

Answer 2

For your second question, one possibility would be to change the list-style-position to inside for your li tags:

li { list-style-position: inside; }

This will move the number inline with the rest of the text and allow you to style it all together. This does however stop the text aligning separately.

For your first question, it is possible to style the numbers separately in theory using the pseudo-element marker like so:

li::marker { color: orange; }

However, I think this is currently not supported in any browser. You can use the mozilla specific ::-moz-list-number but that will obviously not work in other browsers.

You can see all these bits in my example here: http://jsfiddle.net/XmtxL/

Aileen

Thanks John. Yes, list-style-position: inside will move the numbers to within the background/border, although I had been hoping to keep the list text aligned as a block. Hmmmm... – Ethylethylate

Answer 3

it's easy to achieve with css only:

#secondary ol {
 color: <orange>;
}

#secondary li {
 color: <black>;
}

replace the placeholders with the correct color code!

you may have to fiddle with it depending on your css but the principle is:

• apply the color you want the "numbers" to appear like, to the <ol>
• apply the text color to the <li> tags

as for the rest of your question, wrap the <ol> in a container div and apply the desired background to it.

Clamber

"So the remaining issue is how to extend the background colour/border under the numbers too." You seem to have misread the question. – Adolescent

Thanks luca, but that changes the numbers to black (I am using FF if that makes a difference). I managed to get around this using jQuery as in my question above, so now my focus is on getting the background color to extend under the numbers... – Ethylethylate

my bad, I've amended my answer to address the question – Clamber

Thanks again Luca! But, #secondary li affects the numbers too. Also, whether I apply the colour to the ol or li, it does not extend under the numbers. Perhaps this has something to do with my CSS? I use Eric Meyer's reset.css then apply margin-left:20px to the ol. – Ethylethylate

Answer 4

As for question #1: It seems you've already coloured them differently? (I can edit this answer if you still need the solution)

For the #2:

ul#idname li {
   background:#ddd;/*whatever colour*/
}

where idname is the id of that <ul>

Nidifugous

also, if you want to extend/decrease the size of the coloured background, edit the padding. – Nidifugous

Thanks peopje, I realise my question is misleading. I have managed to colour the numbers using jQuery (tried your CSS but didn't work), so now my focus is on getting the background colour to extend under the numbers. – Ethylethylate

On the li? Doesn't work for me. Sorry if I am not being clear... I would like to have the grey extend under the numbers. – Ethylethylate

Answer 5

For those, who need just a background image as I do there is a css-only solution for this:

ol
    margin: 0
    padding: 0
    margin-left: 30px
    position: relative
    z-index: 2
    > li
      padding-left: 16px
      margin-bottom: 20px
      font-style: normal
      font-weight: 700
      position: relative
      z-index: initial
      &:before
        position: absolute
        content: url(../images/ol-li-1.png)
        top: -8px
        left: -34px
        z-index: -1

See codepen

Linoleum