
Custom Mouse Cursor Using External Image
July 24, 2024
Center elements with flexbox
July 25, 2024
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.