I'm trying to create a list style as shown in the below figure
I tried to add the bordering but it's coming for the whole structure.
.styled-list {
list-style: none;
max-width: 200px;
padding: 0;
margin: 0;
}
.styled-list li {
position: relative;
padding-left: 10px;
}
.styled-list li:before {
border-radius: 100%;
position: absolute;
content: '';
height: 5px;
width: 5px;
top: 6px;
left: 0;
}
.styled-list li:nth-child(even) {
padding-right: 10px;
text-align: right;
padding-left: 0;
}
.styled-list li:nth-child(even):before {
left: auto;
right: 0;
}<ul class="styled-list">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
</ul>How can I change the my list to the image shown.