Custom Styled Numbered List Tutorial in Oxygen Builder [CSS]


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.

  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.

Become a member

FREE WEB DESIGN LESSON

SIGNUP FOR MY FREE 40-MINUTE OXYGEN BUILDER COURSE TASTER