Does the list style type decimal after the actual contents

Question

This is probably not possible, but I have to ask. Let's say I have a list:

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

If I use css:

 .list { list-style-type:decimal } 

It will display:

 1. hello world 2. hello world 

Can I make numbers after the actual contents, whether it is even better without a dot, for example:

 hello world 1 hello world 2 

Ty!

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

Answer 1

Perhaps you can 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/

It may be difficult for you to get the exact result you need.

CSS3 offers a lot more options for list markers , but browser support is currently quite spotty.

Answer 2

You can do it 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/

Answer 3

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

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

Scroll each <li> and use the index (0) parameter to add a number after the content

Answer 4

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

Answer 5

You may 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.