Apply 'Aesthetic' Numeric List styling / Guide List: UI Component

Brief

By replacing default list styling and implementing a structured design, the below code presents steps in a clear and organized manner. The use of counters within the .steps class not only numbers each item but also displays them in striking circular designs. This thoughtful design choice adds sophistication while ensuring clarity, making navigation intuitive. The smooth hover effect enhances user interaction, creating a dynamic feel that invites engagement.

Additionally, the incorporation of unique markers for pros and cons enriches the aesthetic appeal of the list. Distinct symbols — plus signs for pros and minus signs for cons — allow for quick comprehension and create a visually pleasing contrast. These details not only organize information effectively but also enhance the overall user experience. The combination of functionality and aesthetic design in this CSS code showcases how well-crafted numeric list styling can elevate the presentation of content, making it both attractive and accessible as a UI component.

Procedure

1. Go to Blogger Dashboard.
2. Click  icon next to the Customize button.
3. Backup your Theme and then click Edit HTML, you will be redirected to the editing page.
4. Now, find this ]]></b:skin> in your Template/Theme and paste the below code just above it;

   /* Aesthetic Numeric List Style */
   .noList, .steps, .pros, .cons{list-style:none;margin:0 0 25px;padding:0}
   .steps{--sz:30px;counter-reset:num;line-height:1.6}
   .steps >*{position:relative;counter-increment:num;padding-inline-start:calc(30px * 1.5)}
   .steps >*:not(:last-child){padding-bottom:calc(30px / 2)}
   .steps >*::before{content:counter(num) '.';display:flex;align-items:center;justify-content:center;position:absolute;top:-2px;inset-inline-start:0;width:30px;height:30px;border:1px solid #009688;border-radius:50%;color:#009688;font-size:small;line-height:1;transition:0.3s}
   .steps >*:hover::before{background-color:#009688;color:#fff}
   .steps >*::after{content:'';position:absolute;top:calc(30px + 8px);inset-inline-start:calc(30px / 2);bottom:8px;border-inline-start:1px solid #009688}
   .steps .zmImg:not(.s){margin-top:1.2em}
   .pros, .cons{margin:5px 0 15px;padding-inline-start:10px;line-height:1.3;font-size:95%}
   .pros li::marker{content:'\002B'}
   .cons li::marker{content:'\2212'}
   .pros li, .cons li{margin-bottom:10px;padding-inline-start:10px}

5. Save & Exit.
6. Now, use the 'HTML' code provided below to apply it anywhere in your Article/Post."

   <ol class="steps">
   <li>Text-1</li>
   <li>Text-2</li>
   <li>Text-3</li>
   <li>Text-4</li>
   <li>and so on....</li>

It is brought to your kind attention that the CSS code provided above is applicable solely to the light mode implemented in a theme. Users may notice that the CSS does not completely display certain features of the Countdown Download Box when dark mode is activated. To effectively integrate the aforementioned code into dark mode, users are requested to add the necessary CSS to their website's dark mode stylesheet to address the issues that arise when enabling dark mode.