Тип стиля списка десятичный после фактического содержания ли

Question

Это, вероятно, невозможно, но я должен спросить. Допустим, у меня есть список:

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

Если я использую CSS:

.list {
list-style-type:decimal
}

Будет отображаться:

1. hello world
2. hello world

Могу ли я сделать так, чтобы числа появлялись после фактического содержания li и даже лучше без точки, например:

hello world 1
hello world 2

Ty!

У вас есть идеи ... если это невозможно с помощью CSS, может быть, с помощью jquery?

Answer 1

Возможно, вы сможете использовать :after и CSS-счетчики :

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

Демо: http://jsfiddle.net/ambiguous/DePqL/1/

Может быть трудно получить точный эффект, который вы после этого.

CSS3 предлагает намного больше опций для маркеров списка , но поддержка браузера в настоящее время довольно нечеткая.

Answer 2

Это можно сделать с помощью css сгенерированного контента

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

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

Пример: http://jsfiddle.net/Xrbm2/2/

Answer 3

Я не знаю о решении CSS, но, поскольку вы упомянули jquery, как насчет чего-то вроде следующего:

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

Перебирайте все <li> и используйте index (на основе 0) параметр для добавления номера после содержимого

Answer 4

Попробуйте это, 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;
});

Демонстрация: jsfiddle

Answer 5

Возможно, вам придется создать эффект самостоятельно.Вот пример.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>

Конечно, если у вас длинный список, вы можете использовать JavaScript или jQuery для динамического добавления чисел.