Archived topic
Stylize the ordered list and unordered list
3 replies · Started by Rohan Verma on June 15, 2020
Viewing posts 1–4 of 4
Hello Team,
How can I get an ordered list even ordered list like this:https://prnt.sc/szvms5. Like the circle numbering and vertical line
Hi there,
the Site you provided a link for uses this CSS:
.entry-content ol {
counter-reset: li;
}
ol {
list-style: decimal;
}
.entry-content ol li {
position: relative;
margin: 0 0 .5rem 1.03rem;
padding: 4px 1.1rem .3rem 1.5rem;
list-style: none;
border-left: .5px solid #073042;
}
.entry-content ol>li:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: 0;
left: -1.2em;
box-sizing: border-box;
margin-right: 8px;
display: block;
font-size: .9rem;
padding: 7px;
width: 2.1rem;
height: 2.1rem;
line-height: 1.3;
text-align: center;
font-weight: 500;
border: .5px solid #15C77C;
background: #15C77C;
color: #fff;
border-radius: 999em;
}
Thanks, David it's working, now I want same vertical line for the unordered list as well. How to achieve that
Try replacing ol in David's code with ul
This archived topic is closed to new replies.