Here's a neat solution. (Honestly I surprised myself with this.) CSS has something called counters, where you can set, for example, automatic chapter numbers on each heading. A bit of modification gives you the below; You'll need to sort out padding etc yourself.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}<span>custom list style type (v1):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Works in all modern browsers and IE9+ (and possibly IE8 but may be buggy).
Update: I added child selector to prevent nested lists picking up the parent style. trejder also beings up a good point in the comments that the list item alignment is also messed up. An article on 456bereastreet has a good solution which involves absolutely positioning the counter.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}<span>custom list style type (v2):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Here is a jsFiddle showing the result, including nested lists.
Answer from DisgruntledGoat on Stack OverflowHere's a neat solution. (Honestly I surprised myself with this.) CSS has something called counters, where you can set, for example, automatic chapter numbers on each heading. A bit of modification gives you the below; You'll need to sort out padding etc yourself.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}<span>custom list style type (v1):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Works in all modern browsers and IE9+ (and possibly IE8 but may be buggy).
Update: I added child selector to prevent nested lists picking up the parent style. trejder also beings up a good point in the comments that the list item alignment is also messed up. An article on 456bereastreet has a good solution which involves absolutely positioning the counter.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}<span>custom list style type (v2):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Here is a jsFiddle showing the result, including nested lists.
More than 10 years after the original question the standard (and, to some extent, implementations) seem to have caught up.
CSS now provides ::marker pseudoclass which can be used to achieve custom list markers: MDN.
Using ::marker automatically indents li's content without any hacks. According to MDN, as of Feb 2021 it's supported in Firefox, Chrome and Edge, and partially (not for this use case) in Safari.
.container {
width: 400px;
}
ol.custom-marker {
counter-reset: list;
}
ol.custom-marker > li {
list-style: none;
counter-increment: list;
}
ol.custom-marker.parens-after.decimal > li::marker {
content: counter(list) ")\a0";
}
ol.custom-marker.parens-around.lower-roman > li::marker {
content: "(" counter(list, lower-roman) ")\a0";
}<div class='container'>
<ol class='custom-marker parens-after decimal'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
<li>Another list here
<ol class='custom-marker parens-around lower-roman'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
</ol>
</div>\a0 in content is , since ::marker doesn't support margins or padding.
It's transformed into HTML, and rendered by your browser. So even if 1)... 2)... were recognized, the output would still be
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
...and the output would still be
- First item
- Second item
So the change would allow markup that other Markdown engines wouldn't recognize, and produce exactly the same output. You might as well just get used to the period.
It is not a bad idea, but too significant a deviation from the Markdown specification to be viable, IMO.
You can achieve this with an ordered list <ol>:
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list) ") ";
counter-increment: list;
}<ol>
<li>some text</li>
<li>some more text</li>
<li>some further text</li>
</ol>Sample JSFiddle
Referenced from: Ordered list (HTML) lower-alpha with right parentheses?
I know this is a little old now, but none of these solutions take into account double-digits or triple-digits or even wrapping lines of text.
*, ::after, ::before {
box-sizing: border-box;
}
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
content: counter(list) ")";
counter-increment: list;
left: -40px;
padding-right: 10px;
position: absolute;
text-align: right;
width: 40px;
}<ol>
<li>Line 1</li>
<li>Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. </li>
<li>Line 3 is not so long.</li>
<li>Line 4</li>
<li>Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. </li>
<li>Line 6 is not so long.</li>
<li>Line 7</li>
<li>Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. </li>
<li>Line 9 is not so long.</li>
<li>Line 10</li>
<li>Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. </li>
<li>Line 12 is not so long.</li>
</ol>This is possible with custom counters, but at least IE7- doesn't support it, some others mightn't either. See here for details: http://www.quirksmode.org/css/counter.html
Ex:
li:before {
content: "(" counter(mycounter,lower-latin) ")";
}
I use this code snippet in mediawiki with CSS enabled. I am not sure whether this will work in older versions of IE...
<style>
/* css handles the parentheses/brackets */
.laparent ol { counter-reset: item }
.laparent li { display: block ; counter-increment: item; }
/* replace the counter before list item with
open parenthesis + counter + close parenthesis */
.laparent li:before { content: " (" counter(item,lower-alpha) ") "; }
</style>
<ol class="laparent">
<li> this is the first item; </li>
<li> this is the second item; or </li>
<li> this is the third item. </li>
</ol>
Outputs:
(a) this is the first item;
(b) this is the second item; or
(c) this is the third item.