Help - Search - Members - Calendar
Full Version: (a), (b), (c) rather than a., b., c. for list items
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Befuddled
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?)
Christian J
See here: https://www.w3.org/TR/css-lists-3/ but unfortunately browsers don't seem to support it yet.
Befuddled
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.
Christian J
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/
Befuddled
Yes, this looks familiar. Too tired to try it out now, but I expect and hope to do so tomorrow.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.