CODEWITHSUNDEEP
htmlcss
None
None

Reputation: 9247

How to add border to list-style?

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?

Upvotes: 0

Views: 60

Answers (1)

CoderPi
CoderPi

Reputation: 13221

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

Upvotes: 1

Related Questions