CODEWITHSUNDEEP
css
Wokoman
Wokoman

Reputation: 1119

list item with asterix

is it possible to increment asterixes in a ordered list ? So if I have something like

<ol class="ast">
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
</ol>

that would show up on my page as follows

*   item 1
**  item 2
*** item 3

using css ?

Upvotes: 5

Views: 12815

Answers (5)

chkpnt
chkpnt

Reputation: 387

In case your target is only Safari or iOS, you might use a list-style-type of asterisks.

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

Upvotes: 0

Godstrump
Godstrump

Reputation: 154

There is always a way:

ul {
     list-style: "*";
}

li {
     padding-left: 20px;
}

Works like a charm.

Upvotes: 2

Brian Zelip
Brian Zelip

Reputation: 3191

The CSS symbols() function allows you to create something similar to what you're looking for.

See https://developer.mozilla.org/en-US/docs/Web/CSS/symbols.

An example is to style a list like:

ol {
  list-style: symbols(symbolic "*");
}

While the above code auto-increments the number of asterisks per each <li> like what you want, the amount of asterisks grows to the left instead of to the right like what you're after.

Also, once you get past a certain number of list items, the number of asterisks will grow beyond your available white space. See this demo for an example of this problem.

Also, symbols() is currently only supported in FireFox version 35 or higher.

Upvotes: 1

Gus
Gus

Reputation: 6871

I don't beleive there is a way to handle it for arbitrary depth. Diodeus's solution would handle a known maximum depth at the expense of a lot of CSS code.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

You can, but you'd have to un-style the list (list-style:none) and use the "before:" pseudo class to absolutely-position your asterisk, combined with n-th child to set the number of asterisks.

Something like this, but you'll have to tweak it a bit.

ul, li {
   margin:0;
   padding:0;
  list-style:none      
}

li {
   padding-left:20px; 
}

li:nth-child(1):before {
   content: "*" 
}

li:nth-child(2):before {
   content: "**" 
}

Upvotes: 3

Related Questions