3

How to define a style for the list numbering in HTML5, which is compatible with <ol reversed>?

I found ::-moz-list-number but it works just in Firefox. Does anybody know a better alternative to do the same?

ceving
  • 21,900
  • 13
  • 104
  • 178
  • 1
    Why would *HTML* provide an alternative to a pseudo-element? – BoltClock Jan 07 '16 at 16:26
  • @BoltClock Read it as "a CSS (what ever version) pseudo-element, which works in modern browsers, supporting HTML5". – ceving Jan 07 '16 at 16:30
  • @BoltClock Can you show me the answer you are referencing by "This question has been asked before and already has an answer"? – ceving Jan 07 '16 at 18:01

1 Answers1

0

I totally missed the very obvious reverse part. It looks like you might need to do <li><span>Item</span></li> and unstyle in the <span> what you styled to the <li>.

Old Answer (might be useful for some).

You can style ::before and add content: counter(someCounter).

ol {
  list-style: none;
  counter-reset: item;
}

ol li::before {
  counter-increment: item;
  content: counter(item) ". ";
  color: red;
  font-weight: bold;
}

Here's a quick demo: https://jsfiddle.net/crswll/toggchgd/1/

Bill Criswell
  • 32,161
  • 7
  • 75
  • 66
  • This ignores the part "which is compatible with `
      `".
     – ceving Jan 07 '16 at 15:45
  • 1
    Damn. Shocked there's no option for that when defining the counter. I know you can do this but it's pretty useless unless you know the amount of items in the list: https://jsfiddle.net/crswll/toggchgd/2/ – Bill Criswell Jan 07 '16 at 15:59
  • Looks like your only option is putting a `` around the text as well and unstyling what you did to the `li` unfortunately. – Bill Criswell Jan 07 '16 at 16:01
  • Here goes an approach that requires just a bit of JS: https://jsfiddle.net/crswll/toggchgd/3/ – Bill Criswell Jan 07 '16 at 16:42
  • 1
    "Shocked there's no option for that when defining the counter." I suspect the problem is in CSS not being able to determine the number of elements to count down from in advance. Remember that counters can have arbitrary scopes. – BoltClock Jan 07 '16 at 16:49
  • Yeah. For some reason I thought that since the `reversed` property allowed it to happen it could be available in some way. – Bill Criswell Jan 07 '16 at 17:47