Custom Styled Numbered List CSS Tutorial Using Oxygen Builder


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.

  1. How To Customize Your WordPress Sidebar With HTML and CSS
  2. Six Simple CTA Button Styles With Hover Effects: CSS Tutorial

Get full access to all of the content

Everything you need to design your website with WordPress, Oxygen, Bricks Builder, plus over 100 video tutorials, written tutorials, code snippets, and more.

JOIN TODAY