Welcome to another quick CSS tutorial. In this short tutorial, we’re going to create a simple but cool looking custom styled numbered list. Let’s get started.
Numbered lists are great to use for displaying itemized instructions. For example, if you’re providing steps to a process, a numbered list would be a perfect format for this.
Most numbered lists in blog posts look pretty dull and boring, wouldn’t you agree? But we’re going to change this in this tutorial.
Before we get started, I’m using Oxygen Builder to do this in, however, this tutorial is not technology dependent. By this I mean you can implement this code in any WordPress theme, as long as you can add your own custom CSS.
OK, when you’re ready, you can watch the quick video tutorial below.
Numbered List CSS Code Snippet
Below, you will find the CSS code snippet that you can copy and use in your theme’s CSS template. Feel free to modify it any way you want.
/* CUSTOM NUMBERED LIST STYLE
----------------------------*/
ol {
counter-reset: my-custom-counter;
list-style: none;
padding-left: 45px;
}
ol li {
margin: 0 0 0.5rem 0;
counter-increment: my-custom-counter;
position: relative;
}
ol li::before {
content: counter(my-custom-counter);
background: #000;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
position: absolute;
--size: 25px;
left: calc(-1 * var(--size) - 10px);
line-height: var(--size);
width: var(--size);
height: var(--size);
top: 0;
transform: rotate(-10deg);
border-radius: 50%;
text-align: center;
}If you have any questions regarding this tutorial or code, feel free to get in touch with me via my contact page here.
Watch More Tutorials
Check out these CSS tutorials for WordPress.