Issue
I'm trying to create a vertical line using CSS that contains multiple dots. However, I'm not quite sure how to do that.
Could anyone help me out with this?
I want to create something just like this one here.
Solution
I'm hoping the code below will help you figure things out. If you require more, you can use the vertical wizard
to conduct a Google search and obtain additional code like this:
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul:before {
content: "";
display: inline-block;
width: 2px;
background: red;
position: absolute;
left: 3px;
top: 5px;
height: calc(100% - 10px);
}
ul li {
position: relative;
padding-left: 15px;
margin-bottom: 15px;
}
ul li:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: red;
position: absolute;
left: 0;
top: 5px;
border-radius: 10px;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
Answered By - Ponsiva
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.