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!

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

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/