How to add border to list-style?

Question

So i have list of items and im using list-style: decimal; but i want to add border to only for li also for that decimal. This is my fiddle: https://jsfiddle.net/zzzpLqwq/ Any suggestion?

Answer 1

Use list-style-position: inside and the border on the <li> itself:

 ul { list-style: decimal; display: inline-block; } li { background: red; list-style-position: inside; border-bottom: 1px solid #ccc; } 

 <ul> <li>First</li> <li>Second</li> <li>Thrid</li> </ul> 

Your updated JSFiddle