Welcome to another quick CSS tutorial. Here we’re going to create a simple but cool-looking custom-styled numbered list in Oxygen, similar to the one we created in Bricks Builder.
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, 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.
A plugin I would recommend checking out for adding code snippets to your website safely is the WPCodeBox plugin. This is a premium plugin, however, it’s very powerful and comes with a ton of time-saving features.
When you’re ready, you can watch the quick video tutorial below.
Numbered List CSS Code Snippet
Right then, 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;
}
Don’t forget to preview the result on the front end. For more tutorials like this, including advanced WordPress and page builder tutorials, check out my membership.
Watch More Tutorials
Check out these CSS tutorials for WordPress.
