[SOLVED] Remove the period from an ordered list that has specific values to the list number

Remove the period from an ordered list that has specific values to the list number

I have an ordered list with specific values to the "list number".

I have seen solutions for a list that increments the value, however my values need to be specific and cannot change.

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>

Right now it prints out as

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

I need the numbers to print out as 'values'

2 Cookies
1 Chocolate
2 Brownies
10 Ice cream sandwich

Solution

What you want is perfectly possible with CSS if you use data attributes:

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>

It is however also a rather weird use of HTML this way, as you're using an ordered list to represent unordered data. Therefore you should replace <ol> with <ul> in my sample to be semantically correct. The same CSS applies just fine this way, that's just presentational.