Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ (a), (b), (c) rather than a., b., c. for list items

Posted by: Befuddled Jan 6 2019, 03:36 AM

ol.abcde li {list-style-type: lower-alpha;} has list items within OL class abcde start with "a.", "b.", etc. That's halfway to what I want.

I dimly remember that CSS allows one to have these appear instead as "(a)", "(b)", etc., or indeed as any other string of characters before and after the variable. If I could think of the name of the relevant property, I'd look it up in one of the various references. However, I can't think of the name of the property. Anyone know?

(Or am I just imagining this?)

Posted by: Christian J Jan 6 2019, 05:59 AM

See here: https://www.w3.org/TR/css-lists-3/ but unfortunately browsers don't seem to support it yet.

Posted by: Befuddled Jan 6 2019, 07:19 AM

Thank you, Christian J.

If it's not supported, then I shouldn't be using it. That aside, it looks completely unfamiliar. I thought that there was some widely supported mechanism whereby one could add set text to the beginning and to the end of anything--but come to think of it, using this on LI would give me:

(a. Cardinal Ximénez)
(b. Cardinal Biggles)
(c. Cardinal Fang)

--not at all what I want.

Posted by: Christian J Jan 6 2019, 10:43 AM

QUOTE(Befuddled @ Jan 6 2019, 01:19 PM) *

I thought that there was some widely supported mechanism whereby one could add set text to the beginning and to the end of anything

Yes, I was complicating things in my previous post, sorry. blush.gif This seems well supported:

CODE
li {
list-style: none; /* removes default numbers */
counter-increment: foo;
}

li:before {content: "(" counter(foo, lower-latin) ") ";}

CSS2.1 still seems to be the official spec for these properties: https://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html but more are in the works:
https://www.w3.org/TR/CSS22/generate.html
https://www.w3.org/TR/css-lists-3/

Posted by: Befuddled Jan 7 2019, 08:41 AM

Yes, this looks familiar. Too tired to try it out now, but I expect and hope to do so tomorrow.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)