CODEWITHSUNDEEP
csshtml-lists
webmasters
webmasters

Reputation: 5831

List style type decimal after the actual content of the li

This is probably impossible but I have to ask. Lets say I have a list:

<ul>
<li>hello world</li>
<li>hello world</li>
</ul>

If I use the css:

.list {
list-style-type:decimal
}

It will render:

1. hello world
2. hello world

Can I make the numbers appear after the actual content of the li and even better without the dot, like:

hello world 1
hello world 2

Ty!

Do you have any ideas... if this is not possible with CSS maybe with jquery?

Upvotes: 4

Views: 1909

Answers (5)

Idham Perdameian
Idham Perdameian

Reputation: 2277

Try this, Html:

<ul id="theul">
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ul>

Js:

var i=1;
    $("#theul li").each(function() {
      $(this).append(" " + i);
        i = i+1;
});

Demo : jsfiddle

Upvotes: 0

mu is too short
mu is too short

Reputation: 434685

You might be able to use :after and CSS counters:

ol {
    counter-reset: pancakes;
}
li {
    list-style-type: none;
}
li:after {
    content: counter(pancakes);
    counter-increment: pancakes;
}

Demo: http://jsfiddle.net/ambiguous/DePqL/1/

Might be difficult to get the exact effect you're after though.

CSS3 offers a lot more options for list markers but browser support is rather spotty at the moment.

Upvotes: 5

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could do this with css generated content

.list {
    padding:2em;
    list-style-type:none;
    counter-reset:nums;    
}

.list li:after{
    counter-increment:nums;
    content: " " counter(nums);
}

Example: http://jsfiddle.net/Xrbm2/2/

Upvotes: 3

thekaveman
thekaveman

Reputation: 4409

I don't know about a CSS solution, but since you mentioned jquery, how about something like the following:

$('li').each(function(index) {
    $(this).append(" " + (index + 1));
});

Loop through each <li> and use the index (0 based) parameter to append the number after the content

Upvotes: 2

Will
Will

Reputation: 20235

You will probably have to create the effect yourself. Here is an example. http://jsfiddle.net/9NmYm/.

ul {
   list-style: none;
}
ul li span.num {
    float: right;
}

<ul>
    <li>Hello World<span class="num">1</span></li>
    <li>Hello World<span class="num">2</span></li>
    <li>Hello World<span class="num">3</span></li>
</ul>

Of course, if you have a long list, you can use JavaScript or jQuery to dynamically add numbers.

Upvotes: -1

Related Questions