Is there a way to customize the punctuation used in lists in HTML and CSS? For instance, can the standard period at the end of list items be changed to a right parenthesis or removed altogether?
Concept
Below is an example of improper CSS attempting to achieve this customization:
<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>
The desired outcome in the browser should look like this:
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 would like to achieve this without using jQuery or JavaScript. The goal is to stick as closely to proper HTML 5 and CSS 3 standards as possible.