Html Question posted in
Some basic documentation can be found here.

Html – List style for additional dots

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.

Tags:

2

Answers


  1. 0

    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. 0

    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