Custom Styled Numbered List CSS Tutorial Using Oxygen Builder

Written by
Fabrizio Van Marciano
Posted on
February 14, 2020

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

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
.FVM © 2014 - 2019. A division of Magnet4Blogging Media. All Rights Reserved.
filmcamera-retrohtml5 linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Copy link
Powered by Social Snap