Navigation menu errors are common, even for seasoned developers. Learn seven common navigation menu errors and how to solve them using CSS.
TanStack Start vs. Next.js: both are powerful full-stack React frameworks, but they take fundamentally different approaches to architecture, routing, and developer experience. This guide breaks down their core features from SSR and data fetching to TypeScript support and deployment, to help you choose the right tool for your next React project.
While it may seem like a maintenance update, Angular v20 is packed with practical, production-ready upgrades that will enable us to build apps faster and with more confidence.
Build a responsive, multi-page e-commerce site with Stitch, Google’s new AI-powered UI design and development tool.
4 Replies to "Styling numbered lists with CSS counters"
You cannot just get rid of semantics and splash divs everywhere nilly-willy. That’s not how HTML works.
One of the problems here is getting everything to line up nicely and work when using paragraphs that wrap in smaller screens. Solution: Apply the before pseudo class to a span element as follows:
The thinking is done for you. You don’t have to worry about logistics at all.
Wrap the li content in a div to be able to apply top padding if preferred:
ol.numbered-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
counter-reset: list-number;
}
ol.numbered-list li {
counter-increment: list-number;
margin-bottom: 7px;
display: flex;
width: 90%;
vertical-align: middle;
}
ol.numbered-list span {
display: inline-block;
vertical-align: middle;
}
ol.numbered-list div {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
}
ol.numbered-list li span:before {
content: counter(list-number);
margin-right: 10px;
background-color: #0191C8;
border-radius: 50%;
color: #FFF;
width: 2rem;
height: 2rem;
padding-top: 0.3rem;
display: inline-block;
text-align: center;
font-size: 16px;
box-sizing: border-box;
}
nested with the start attribute works fine in Chrome but not Firefox. Any thoughts? https://codepen.io/alireza-o/pen/gOxLbMB
Thanks for this, I’ve been searching for how to implement this, and totally removed the traditional wordpress numbered list on my site. Here’s the new look on https://www.dailyschoolgist.com/