skip to Main Content

I’m looking for a CSS property or list style that would be able to display a list of increasing size. Something like

Buy now to get a discount!

<ol style="list-style: none">
  <li>* Only available for the first 12 months</li>
  <li>** Only available for new customers signing up for a paid plan</li>
</ol>

In my particular case there’s an arbitrary number of <li> tags though, so it’d be best if the CSS styling could handle increasing the number of asterisks per line without me needing to hard code or calculate it myself.

2

Answers


  1. This is done automatically, you just need to nest <ol> in a deeper level:

    ol {
      list-style: '*';
      padding-inline-start: .5em;
    }
    Buy now to get a discount!
    
    <ol>
      <li>Only available for the first 12 months</li>
      <li>
        <ol>
          <li>Only available for new customers signing up for a paid plan</li>
        </ol>
      </li>
    </ol>
    Login or Signup to reply.
  2. You don’t need to nest the lists. Just use a symbolic counter style:

    @counter-style asterisks {
      system: symbolic;
      symbols: "*";
      suffix: " ";
    }
    
    ol { 
      list-style: asterisks inside;
      padding-inline-start: 0;
    }
    <ol>
      <li>Only available for the first 12 months</li>
      <li>Only available for new customers signing up for a paid plan</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search