List style for additional dots

Issue

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.

Solution

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>

Answered By - Alohci