Question

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?

Answer 1

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.