在列表项之间插入垂直间距

Question

I have a simple list and I would like to add a border-bottom as the below image shows.

My solution

 li { height: 48px; border-bottom: 1px solid #D0D0D0; } li::before { content: counter(li); background: #29C9CE; display: inline-block; width: 1em; font-family: Raleway; font-style: normal; font-weight: bold; font-size: 32px; line-height: 38px; text-align: center; margin-right: 5px; color: #FFFFFF; }

 <ol> <li>full border bottom width</li> <li>full border bottom width</li> <li>full border bottom width</li> </ol>

I tried even tried with after pseudo-element but nothing,

I want the result to be the same as the image above. thanks

Answer 1

You can add some top and bottom margin to each <li> element. Also, your counter() usage needed to be updated so I added counter-increment: listCounter to the <li> elements and then used counter(listCounter) for the pseudo element li::before content. Try this out.

 li { height: 48px; border-bottom: 1px solid #D0D0D0; margin-bottom: .75rem; display: flex; align-items: flex-start; /* change this to center for text to be aligned with list number */ counter-increment: listCounter; } li:not(li:first-child) { margin-top: .75rem; } li::before { content: counter(listCounter); background: #29C9CE; display: inline-block; width: 1em; font-family: Raleway; font-style: normal; font-weight: bold; font-size: 32px; line-height: 38px; text-align: center; margin-right: 5px; color: #FFFFFF; }

 <ol> <li>full border bottom width</li> <li>full border bottom width</li> <li>full border bottom width</li> </ol>