CODEWITHSUNDEEP
htmlcsshtml-lists
itsok
itsok

Reputation: 45

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

Upvotes: 1

Views: 862

Answers (2)

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

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.

Upvotes: 0

Eric Walker
Eric Walker

Reputation: 1052

You don't want an ordered list then, you want an unordered list (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>

I included the value in the list item itself as your example shows.

2 Cookies
1 Chocolate
2 Brownies
10 Ice cream sandwich

HTH, Eric

Upvotes: 1

Related Questions