Custom Step 1,2,3 ordered lists in Elementor and CSS | How to add custom words to ordered lists
In this tutorial, you will learn how to create custom ordered lists in Elementor and CSS and add custom words before the numbers 1,2,3 in your list. That way you can create the list that has 'Step 1', 'Step 2', 'Step 3' instead of just 1, 2, 3 markers.
This 'Step' word can be changed to whatever word or words of your choice.
We will be using and styling the ::marker of our list, add the content to it and use counter-increment property.
If you want to place 'Step 1', 'Step 2' etc. on a separate line, above your list item text, you will have to use a ::before pseudoelement. That is because in that case, we will use display: block property, which doesn't apply to markers, but it does apply to ::before pseudoelements.
Setting display to block will make the 'Step 1', 'Step 2' and 'Step 3' take up the full width of the list, which will create the hard break!
We are using a simple Text editor in Elementor.
💻 Grab the CSS code here:
https://www.cssgamelab.com/2024/11/28...
🚀 Interactive CSS Basics course for designers and non-coders:
https://www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
––––––––––––––––––––––––––––––
PURCHASE AND DOWNLOAD ELEMENTOR PRO:
https://be.elementor.com/visit/?bta=6...
––––––––––––––––––––––––––––––
SIMPLE CUSTOM CSS AND JS PLUGIN:
To use custom CSS code with Elementor FREE, I am using the Simple Custom CSS and JS plugin for Wordpress that you can download here:
https://wordpress.org/plugins/custom-...
Have fun and thanks for watching!
If this tutorial helped you, please share or subscribe.
––––––––––––––––––––––––––––––
This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
––––––––––––––––––––––––––––––
Have a specific problem in Elementor that you don't know how to solve with CSS? Comment below to let me know which video you would like to see next!
