Удалить период из упорядоченного списка, который имеет определенные значения для номера списка - css

У меня есть упорядоченный список с конкретными значениями для "номера списка".

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

HTML

<td class="list">
  <ol class="junkfood">
    <li value="2">Cookies®</li>
    <li value="1">Chocolate</li>
    <li value="2">Brownies</li>
    <li value="10">Ice cream sandwich</li>
  </ol>
</td>

Прямо сейчас распечатывается как

2. Cookies
1. Chocolate
2. Brownies
10. Ice cream sandwich

Мне нужно, чтобы числа печатались как "значения"

2 Cookies
1 Chocolate
2 Brownies
10 Ice cream sandwich
Источник

2 ответа

Решение

То, что вы хотите, вполне возможно с помощью CSS, если вы используете атрибуты данных:

ol {
    list-style:none;
}
li:before {
    content:attr(data-value) ' ';
}
<ol class="junkfood">
    <li data-value="2">Cookies®</li>
    <li data-value="1">Chocolate</li>
    <li data-value="2">Brownies</li>
    <li data-value="10">Ice cream sandwich</li>
</ol>

Однако это также довольно странное использование HTML, поскольку вы используете упорядоченный список для представления неупорядоченных данных. Поэтому вы должны заменить <ol> с <ul> в моем образце быть семантически правильным. Тот же CSS-код отлично подходит для этого, это просто презентация.

Источник

Вам не нужен упорядоченный список, вам нужен неупорядоченный список (ul)

<ul>
    <li value="2">2 Cookies®</li>
    <li value="1">1 Chocolate</li>
    <li value="2">2 Brownies</li>
    <li value="10">10 Ice cream sandwich</li>
</ul>

Я включил значение в сам элемент списка, как показывает ваш пример.

2 печенья
1 шоколад
2 пирожных
10 бутерброд с мороженым

HTH, Эрик

Источник
Другие вопросы по тегам