I have a list with some items. I used a CSS trick to style the bullet as a circle. However, I would like to add a border underneath each item to separate them.
Because I removed the default bullets using list-style: none, the "bullet" is positioned -1em, causing the border not to extend completely under it.
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li class="selected">Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: red;
}
li:before {
content:"";
border-radius: 50%;
border-style: solid;
border-width: 1px;
width: 10px;
height: 10px;
left: -1em;
top: 0.9em;
position: relative;
display: block;
}
selected:before {
background-color: white;
}
Check out the Plunker
Do you have any suggestions on how I can make the bottom border extend beneath the entire list item, including the styled bullet?