Custom Mouse Cursor Using External Image
Custom Mouse Cursor Using External Image
July 24, 2024
Center elements with flexbox
Center elements with flexbox
July 25, 2024

July 25, 2024

Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses

Styling lists in web development can make content look and read better. With CSS pseudoclasses we can style both unordered and ordered lists. We can even create auto increment in lists which gives a dynamic and professional look to your lists without any extra markup. This tutorial will show you how to do that.

HTML

<ul class="sf-list">
    <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit</li>
    <li>Illum nemo facere nobis deserunt quam</li>
    <li>Asperiores error ab, quisquam distinctio provident quod</li>
    <li>Sit amet consectetur adipisicing elit minima  odit </li>
    <li>Alias minus dolorem velit ipsum</li>
</ul>

<h2>Ordered list:</h2>

<ol class="sf-list">
    <li>Alias minus dolorem velit ipsum</li>
    <li>Asperiores error ab, quisquam distinctio provident quod</li>
    <li>Sit amet consectetur adipisicing elit minima  odit </li>
    <li>Illum nemo facere nobis deserunt quam</li>
    <li>Lorem ipsum dolor, sit amet consectetur adipisicing</li>
</ol>

CSS

/* ---------------------------------------------------------- */
/*              Snippflow Ordered & Unordered List            */
/* ---------------------------------------------------------- */

.sf-list { margin: 30px 0; padding: 0; list-style: none; }
.sf-list li { display: flex; align-items: center; gap: 15px; position: relative; margin-bottom: 15px; }
.sf-list li:before { content: "\2192"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 100%; background-color: #46A787; color: #fff; font-size: 12px; }

ol.sf-list { counter-reset: item; }
ol.sf-list li:before { content: counters(item, "."); counter-increment: item; }

Result

See the Pen Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses by Snippflow (@snippflow) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more