
Design comparison
Solution retrospective
I encountered a challenge while styling `` elements, as I couldn't get the spacing and bullet points to look the way it was in the design, I did a bit of searching and then found out I had to create custom bullet points using ::before
pseudo-element, which gave me full control to position the bullet point exactly where I wanted it. Here's a snippet of what I did to achieve my desired result.
ul,
ol {
list-style-position: inside;
}
ul {
margin-right: 2rem;
list-style: none;
}
ul li {
position: relative;
margin-top: 0.5rem;
padding-left: 2rem;
}
ul li::before {
content: "•";
font-size: 1.3rem;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
What specific areas of your project would you like help with?
I'm open to feedback on any aspect :))
Thank you for your time :)
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord