ul customization to include a Quantity

Question

So, I'm stuck trying to get CSS to insert a quantity between the bullet and the ul item description. Thanks for your help.

* abc 
* efg
* hijklmnop

to

* 125 abc 
* 5   efg
* 20  hijklmnop

Thank you in advance for your help.

Answer 1

Well, you can't use CSS to insert random numbers between a list item and its dot. The best you could do would be to wrap the number in a div and give it a width so the text will line up together.

Something like:

<li><div style="width:50px">125</div> Contrary to popular... </li>

Answer 2

Not sure why you want to use CSS to add content, but you could do something like this

HTML

<ul>
    <li class="add_125">abc</li>
    <li class="add_5">efg</li>
    <li class="add_20">hijklmnop</li>
</ul>

CSS

.add_125:before {
    content:'125 ';
}
.add_5:before {
    content:'5 ';
}
.add_20:before {
    content:'20 ';
}