Pure CSS replacing of periods in OL>LI elements

Question

As far as I know, no matter what list-style-type property you set, the numbers or letters delimiting the list will be followed by a period (.). Is there any way to change this to, say, a right parenthesis ()), or even remove it altogether?

Concept

Here is improper CSS showing what I want to do:

<HTML>
<HEAD>
<STYLE>
OL{
  list-style-type:decimal;
  list-style-punctuation: ')';
}
OL.onlyNumbers{
  list-style-punctuation: none;
}
</STYLE>
</HEAD>
<BODY>
<OL>
  <LI>Won</LI>
  <LI>Too</LI>
  <LI>Tree</LI>
  <LI>Fore</LI>
  <LI VALUE=100>Won Hun Dread</LI>
</OL>
<OL CLASS=onlyNumbers>
  <LI>Won</LI>
  <LI>Too</LI>
  <LI>Tree</LI>
  <LI>Fore</LI>
  <LI VALUE=100>Won Hun Dread</LI>
</OL>
</BODY>
</HTML>

And here is what I want to see in the browser:

  1) Won
  2) Too
  3) Tree
  4) Fore
100) Won Hun Dread

  1 Won
  2 Too
  3 Tree
  4 Fore
100 Won Hun Dread

I don't want anything having to do with jQuery or JavaScript in general. I want this to be as close to proper HTML 5 and CSS 3 as possible.

see also https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses — mykhal, Apr 19 '21 at 18:39

Giona · Accepted Answer · 2012-09-16T18:51:41.700

8

You can use the before pseudo-element and CSS counter feature.

body {
    counter-reset:withBrackets;
    counter-reset:onlyNumbers;
}    
ol {
    list-style:none;
}
ol:not(.onlyNumbers) li {
    counter-increment:withBrackets;
}
ol:not(.onlyNumbers) li:before {
    content:counter(withBrackets) ") ";
}
ol.onlyNumbers li {
    counter-increment:onlyNumbers;
}
ol.onlyNumbers li:before {
    content:counter(onlyNumbers) " ";
}

Check out the working demo

edited Sep 16 '12 at 18:51

answered Sep 16 '12 at 18:46

Giona

20,734
4
56
68

1

does this work with other list styles, such as roman numerals? – Ky - Sep 16 '12 at 18:53
Actually had to take this back because it doesn't work with the HTML `VALUE` attribute – Ky - Sep 16 '12 at 18:57
As far as i know, `counter` is numeric only. What you mean by "it doesn't work with the HTML value attribute"? Please post your code... – Giona Sep 17 '12 at 07:29
Code is posted above in the edit. It's also exemplified, here: http://jsfiddle.net/EvNSh/3/ Your code doesn't respect the `VALUE` attribute of `LI` elements – Ky - Sep 17 '12 at 11:28
The attribute `value` of `li` element is [deprected](http://www.w3schools.com/tags/tag_li.asp). Anyway, i don't understand what you mean by "it doesn't respect" it. If you need to assign a different value to a specific `li` element, you've to override the default `content`. Check this: [jsfiddle.net/gionaf/AnFSC/](http://jsfiddle.net/gionaf/AnFSC/) – Giona Sep 17 '12 at 16:36
Alright, I guess that works... but in my particular application I really don't want to write hundreds of rules for this not-necessarily-ordered list. – Ky - Sep 18 '12 at 01:40
Then the easier way is to combine my CSS with jQuery. If needed, i can provide you the code – Giona Sep 18 '12 at 11:41
No, thank you; I wished this to be pure HTML and CSS. Your answer is perfect for the question, just not my particular application. – Ky - Sep 18 '12 at 18:58
A note to future readers: The value attribute of the `
` element is no longer deprecated in HTML5.

Ky -

Feb 26 '13 at 20:33

2

@Supuhstar, yes this can be done with Romans. See http://coreyjmahler.com/html-pages/zlist-styles.html – cfx Jul 12 '13 at 16:42

Pure CSS replacing of periods in OL>LI elements

Concept

1 Answers1