CODEWITHSUNDEEP
htmlcss
user843939
user843939

Reputation:

custom numbered lists with css

Is there a way to control the text used for the numbering?

For example, is there a way to have the list automatically do something like this:

First,     blah-blah
Second,    blah-blah
Third,     blah-blah
Fourth,    blah-blah
etc.

Upvotes: 3

Views: 700

Answers (3)

techfoobar
techfoobar

Reputation: 66693

Check this fiddle: http://jsfiddle.net/yR6G6/

What we are doing here is adding a pseudo :before element to each LI and customizing its content with JavaScript.

NOTE: This solution assumes you are ok using JS and jQuery. A pure CSS solution is likely not possible at all.

HTML

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

ul li:before {
    content: attr(data-label);
    color: red;
    text-align: right;
    padding-right: 10px;
    font-size: 11px;
    width: 60px;
    display: inline-block;
}

JS

var labels = [
    "First",
    "Second",
    "Third"
    // and so on...    
];

$('ul li').each(function(i) {
    $(this).attr('data-label', labels[i]);
});

Upvotes: 2

Zhenya
Zhenya

Reputation: 220

ul {
    list-style-position: outside;
}

http://www.w3schools.com/cssref/pr_list-style-position.asp

This really doesn't look like the appropriate answer without reading your comment about indentation...

Upvotes: 0

silverstrike
silverstrike

Reputation: 522

If I understand you correctly, you want to only indent the second line. You could do something like this:

li {
    text-indent: -1em;
    padding-left: 1em;  
}

You'll need to play around with those values, and with the values for the <ul> or <ol> element to get everything right.

Upvotes: 0

Related Questions