<p>How can I left-align the numbers in an ordered list?</p>

<pre><code>1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up
</code></pre>

<p>Change the character after the number in an ordered list?</p>

<pre><code>1) an item
</code></pre>

<p>Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.</p>

<p>I am mostly interested in answers that work on Firefox 3.</p>

[{'answer_id': 10887, 'author': 'Marcus Downing', 'author_id': 1000, 'author_profile': 'https://Stackoverflow.com/users/1000', 'pm_score': 5, 'selected': False, 'text': '<p>The CSS for styling lists is <a href="http://www.w3.org/TR/REC-CSS2/generate.html#lists" rel="noreferrer">here</a>, but is basically:</p>\n\n<pre class="lang-css prettyprint-override"><code>li {\n    list-style-type: decimal;\n    list-style-position: inside;\n}\n</code></pre>\n\n<p>However, the specific layout you\'re after can probably only be achieved by delving into the innards of the layout with something like <a href="http://www.w3.org/TR/REC-CSS2/generate.html#counters" rel="noreferrer">this</a> (note that I haven\'t actually tried it):</p>\n\n<pre class="lang-css prettyprint-override"><code>ol { counter-reset: item }\nli { display: block }\nli:before { content: counter(item) ") "; counter-increment: item }\n</code></pre>\n'}, {'answer_id': 10889, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 1, 'selected': False, 'text': '<p>There is the <a href="http://www.htmlcodetutorial.com/_OL_TYPE.html" rel="nofollow noreferrer">Type attribute</a> which allows you to change the numbering style, however, you cannot change the full stop after the number/letter.</p>\n\n<pre><code>&lt;ol type="a"&gt;\n    &lt;li&gt;Turn left on Maple Street&lt;/li&gt;\n    &lt;li&gt;Turn right on Clover Court&lt;/li&gt;\n&lt;/ol&gt;\n</code></pre>\n'}, {'answer_id': 14738, 'author': 'Marcus Downing', 'author_id': 1000, 'author_profile': 'https://Stackoverflow.com/users/1000', 'pm_score': 3, 'selected': False, 'text': '<p>I suggest playing with the :before attribute and seeing what you can achieve with it. It will mean your code really is limited to nice new browsers, and excludes the (annoyingly large) section of the market still using rubbish old browsers,</p>\n\n<p>Something like the following, which forces a fixed with on the items. Yes, I know it\'s less elegant to have to choose the width yourself, but using CSS for your layout is like undercover police work: however good your motives, it always gets messy.</p>\n\n<pre><code>li:before {\n  content: counter(item) ") ";\n  counter-increment: item;\n  display: marker;\n  width: 2em;\n}\n</code></pre>\n\n<p>But you\'re going to have to experiment to find the exact solution.</p>\n'}, {'answer_id': 24960, 'author': 'Peter Hilton', 'author_id': 2670, 'author_profile': 'https://Stackoverflow.com/users/2670', 'pm_score': 3, 'selected': False, 'text': '<p>The numbers line up better if you add leading-zeroes to the numbers, by setting <a href="http://www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style-type" rel="noreferrer">list-style-type</a> to:</p>\n\n<pre><code>ol { list-style-type: decimal-leading-zero; }\n</code></pre>\n'}, {'answer_id': 486662, 'author': 'grom', 'author_id': 486, 'author_profile': 'https://Stackoverflow.com/users/486', 'pm_score': 8, 'selected': True, 'text': '<p>This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ol {\r\n  counter-reset: item;\r\n  margin-left: 0;\r\n  padding-left: 0;\r\n}\r\nli {\r\n  display: block;\r\n  margin-bottom: .5em;\r\n  margin-left: 2em;\r\n}\r\nli::before {\r\n  display: inline-block;\r\n  content: counter(item) ") ";\r\n  counter-increment: item;\r\n  width: 2em;\r\n  margin-left: -2em;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;\r\n  &lt;li&gt;One&lt;/li&gt;\r\n  &lt;li&gt;Two&lt;/li&gt;\r\n  &lt;li&gt;Three&lt;/li&gt;\r\n  &lt;li&gt;Four&lt;/li&gt;\r\n  &lt;li&gt;Five&lt;/li&gt;\r\n  &lt;li&gt;Six&lt;/li&gt;\r\n  &lt;li&gt;Seven&lt;/li&gt;\r\n  &lt;li&gt;Eight&lt;/li&gt;\r\n  &lt;li&gt;Nine&lt;br&gt;Items&lt;/li&gt;\r\n  &lt;li&gt;Ten&lt;br&gt;Items&lt;/li&gt;\r\n&lt;/ol&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><strong>EDIT:</strong> Included multiple line fix by strager</p>\n\n<blockquote>\n  <p>Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.</p>\n</blockquote>\n\n<p>Refer to <a href="http://www.w3.org/TR/CSS2/generate.html#lists" rel="noreferrer">list-style-type</a> CSS property. Or when using counters the second argument accepts a list-style-type value. For example the following will use upper roman:</p>\n\n<pre><code>li::before {\n  content: counter(item, upper-roman) ") ";\n  counter-increment: item;\n/* ... */\n</code></pre>\n'}, {'answer_id': 486704, 'author': 'Stephen Denne', 'author_id': 11721, 'author_profile': 'https://Stackoverflow.com/users/11721', 'pm_score': 1, 'selected': False, 'text': '<p>The docs say regarding <a href="http://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position" rel="nofollow noreferrer"><code>list-style-position</code></a><code>: outside</code></p>\n\n<blockquote>\n  <p>CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.</p>\n</blockquote>\n\n<p>Further up that page is the stuff about markers.</p>\n\n<p>One example is:</p>\n\n<pre><code>       LI:before { \n           display: marker;\n           content: "(" counter(counter) ")";\n           counter-increment: counter;\n           width: 6em;\n           text-align: center;\n       }\n</code></pre>\n'}, {'answer_id': 487884, 'author': 'Marcus Downing', 'author_id': 1000, 'author_profile': 'https://Stackoverflow.com/users/1000', 'pm_score': -1, 'selected': False, 'text': '<p>I have it. Try the following:</p>\n\n<pre><code>&lt;html&gt;\n&lt;head&gt;\n&lt;style type=\'text/css\'&gt;\n\n    ol { counter-reset: item; }\n\n    li { display: block; }\n\n    li:before { content: counter(item) ")"; counter-increment: item; \n        display: inline-block; width: 50px; }\n\n&lt;/style&gt;\n&lt;/head&gt;\n&lt;body&gt;\n&lt;ol&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n    &lt;li&gt;Something&lt;/li&gt;\n&lt;/ol&gt;\n&lt;/body&gt;\n</code></pre>\n\n<p>The catch is that this <em>definitely</em> won\'t work on older or less compliant browsers: <code>display: inline-block</code> is a very new property.</p>\n'}, {'answer_id': 488160, 'author': 'Steve Perks', 'author_id': 16124, 'author_profile': 'https://Stackoverflow.com/users/16124', 'pm_score': 3, 'selected': False, 'text': '<p>Stole a lot of this from other answers, but this is working in FF3 for me. It has <code>upper-roman</code>, uniform indenting, a close bracket.</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ol {\n  counter-reset: item;\n  margin-left: 0;\n  padding-left: 0;\n}\nli {\n  margin-bottom: .5em;\n}\nli:before {\n  display: inline-block;\n  content: counter(item, upper-roman) ")";\n  counter-increment: item;\n  width: 3em;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;\n  &lt;li&gt;One&lt;/li&gt;\n  &lt;li&gt;Two&lt;/li&gt;\n  &lt;li&gt;Three&lt;/li&gt;\n  &lt;li&gt;Four&lt;/li&gt;\n  &lt;li&gt;Five&lt;/li&gt;\n  &lt;li&gt;Six&lt;/li&gt;\n  &lt;li&gt;Seven&lt;/li&gt;\n  &lt;li&gt;Eight&lt;/li&gt;\n  &lt;li&gt;Nine&lt;/li&gt;\n  &lt;li&gt;Ten&lt;/li&gt;\n&lt;/ol&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 489088, 'author': 'strager', 'author_id': 39992, 'author_profile': 'https://Stackoverflow.com/users/39992', 'pm_score': 2, 'selected': False, 'text': '<p>Borrowed and improved <a href="https://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list#10887">Marcus Downing\'s answer</a>.  Tested and works in Firefox 3 and Opera 9.  Supports multiple lines, too.</p>\n\n<pre class="lang-css prettyprint-override"><code>ol {\n    counter-reset: item;\n    margin-left: 0;\n    padding-left: 0;\n}\n\nli {\n    display: block;\n    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */\n}\n\nli:before {\n    content: counter(item) ")";  /* Change \'item\' to \'item, upper-roman\' or \'item, lower-roman\' for upper- and lower-case roman, respectively. */\n    counter-increment: item;\n    display: inline-block;\n    text-align: right;\n    width: 3em;                  /* Must be the maximum width of your list\'s numbers, including the \')\', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */\n    padding-right: 0.5em;\n    margin-left: -3.5em;         /* See li comments. */\n}\n</code></pre>\n'}, {'answer_id': 501153, 'author': 'Marco Luglio', 'author_id': 14263, 'author_profile': 'https://Stackoverflow.com/users/14263', 'pm_score': 0, 'selected': False, 'text': '<p><strong>Quick and dirt</strong> alternative solution. You can use a tabulation character along with preformatted text. Here\'s a possibility:</p>\n\n<pre><code>&lt;style type="text/css"&gt;\nol {\n    list-style-position: inside;\n}\nli:first-letter {\n    white-space: pre;\n}\n&lt;/style&gt;\n</code></pre>\n\n<p>and your html:</p>\n\n<pre><code>&lt;ol&gt;\n&lt;li&gt;    an item&lt;/li&gt;\n&lt;li&gt;    another item&lt;/li&gt;\n...\n&lt;/ol&gt;\n</code></pre>\n\n<p>Note that the space between the <code>li</code> tag and the beggining of the text is a tabulation character (what you get when you press the tab key inside notepad).</p>\n\n<p>If you need to support older browsers, you can do this instead:</p>\n\n<pre><code>&lt;style type="text/css"&gt;\nol {\n    list-style-position: inside;\n}\n&lt;/style&gt;\n\n&lt;ol&gt;\n    &lt;li&gt;&lt;pre&gt;   &lt;/pre&gt;an item&lt;/li&gt;\n    &lt;li&gt;&lt;pre&gt;   &lt;/pre&gt;another item&lt;/li&gt;\n    ...\n&lt;/ol&gt;\n</code></pre>\n'}, {'answer_id': 8235507, 'author': 'William Entriken', 'author_id': 300224, 'author_profile': 'https://Stackoverflow.com/users/300224', 'pm_score': 1, 'selected': False, 'text': '<p>Nope... just use a DL:</p>\n\n<pre><code>dl { overflow:hidden; }\ndt {\n float:left;\n clear: left;\n width:4em; /* adjust the width; make sure the total of both is 100% */\n text-align: right\n}\ndd {\n float:left;\n width:50%; /* adjust the width; make sure the total of both is 100% */\n margin: 0 0.5em;\n}\n</code></pre>\n'}, {'answer_id': 8290965, 'author': 'Metro', 'author_id': 18978, 'author_profile': 'https://Stackoverflow.com/users/18978', 'pm_score': -1, 'selected': False, 'text': "<p>The other answers are better from a conceptual point of view.  However, you can just left-pad the numbers with the appropriate number of '&amp;ensp;' to make them line up.  </p>\n\n<p><em>*</em> Note: I did not at first recognize that a numbered list was being used.  I thought the list was being explicitly generated.</p>\n"}, {'answer_id': 21649098, 'author': 'tomasofen', 'author_id': 1253788, 'author_profile': 'https://Stackoverflow.com/users/1253788', 'pm_score': 0, 'selected': False, 'text': '<p>I will give here the kind of answer i usually don\'t like to read, but i think that as there are other answers telling you how to achive what you want, it could be nice to rethink if what you are trying to achive is really a good idea.</p>\n\n<p>First, you should think if it is a good idea to show the items in a non-standard way, with a separator charater diferent than the provided.</p>\n\n<p>I don\'t know the reasons for that, but let\'s suppose you have good reasons.</p>\n\n<p>The ways propossed here to achive that consist in add content to your markup, mainly trough the CSS :before pseudoclass. This content is really modifing your DOM structure, adding those items to it.</p>\n\n<p>When you use standard "ol" numeration, you will have a rendered content in which the "li" text is selectable, but the number preceding it is not selectable. That is, the standard numbering system seems to be more "decoration" than real content. If you add content for numbers using for example those ":before" methods, this content will be selectable, and dued to this, performing undesired vopy/paste issues, or accesibility issues with screen readers that will read this "new" content in addition to the standard numeration system.</p>\n\n<p>Perhaps another approach could be to style the numbers using images, although this alternative will bring its own problems (numbers not shown when images are disabled, text size for number not changing, ...).</p>\n\n<p>Anyway, the reason for this answer is not just to propose this "images" alternative, but to make people think in the consequences of trying to change the standard numeration system for ordered lists.</p>\n'}, {'answer_id': 31823704, 'author': 'z0r', 'author_id': 320036, 'author_profile': 'https://Stackoverflow.com/users/320036', 'pm_score': 4, 'selected': False, 'text': '<p>You can also specify your own numbers in the HTML - e.g. if the numbers are being provided by a database:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ol {\r\n  list-style: none;\r\n}\r\n\r\nol&gt;li:before {\r\n  content: attr(seq) ". ";\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;\r\n  &lt;li seq="1"&gt;Item one&lt;/li&gt;\r\n  &lt;li seq="20"&gt;Item twenty&lt;/li&gt;\r\n  &lt;li seq="300"&gt;Item three hundred&lt;/li&gt;\r\n&lt;/ol&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>The <code>seq</code> attribute is made visible using a method similar to that given in other answers. But instead of using <code>content: counter(foo)</code>, we use <code>content: attr(seq)</code>.</p>\n\n<p><a href="http://codepen.io/anon/pen/xGMERG" rel="nofollow noreferrer">Demo in CodePen with more styling</a></p>\n'}, {'answer_id': 43049714, 'author': 'Vlad Alivanov', 'author_id': 5622540, 'author_profile': 'https://Stackoverflow.com/users/5622540', 'pm_score': 0, 'selected': False, 'text': '<p>This code makes numbering style same as headers of li content.</p>\n\n<pre><code>&lt;style&gt;\n    h4 {font-size: 18px}\n    ol.list-h4 {counter-reset: item; padding-left:27px}\n    ol.list-h4 &gt; li {display: block}\n    ol.list-h4 &gt; li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}\n    ol.list-h4 &gt; li &gt; h4 {padding-top:3px}\n&lt;/style&gt;\n\n&lt;ol class="list-h4"&gt;\n    &lt;li&gt;\n        &lt;h4&gt;...&lt;/h4&gt;\n        &lt;p&gt;...&lt;/p&gt; \n    &lt;/li&gt;\n    &lt;li&gt;...&lt;/li&gt;\n&lt;/ol&gt;\n</code></pre>\n'}, {'answer_id': 60100741, 'author': 'Flimm', 'author_id': 247696, 'author_profile': 'https://Stackoverflow.com/users/247696', 'pm_score': 5, 'selected': False, 'text': '<h1>HTML5: Use the <code>value</code> attribute (no CSS needed)</h1>\n\n<p>Modern browsers will interpret the <code>value</code> attribute and will display it as you expect. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attr-value" rel="noreferrer">MDN documentation</a>.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;\r\n  &lt;li value="3"&gt;This is item three.&lt;/li&gt;\r\n  &lt;li value="50"&gt;This is item fifty.&lt;/li&gt;\r\n  &lt;li value="100"&gt;This is item one hundred.&lt;/li&gt;\r\n&lt;/ol&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Also have a look at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol" rel="noreferrer">the <code>&lt;ol&gt;</code> article on MDN</a>, especially the documentation for the <code>start</code> and attribute.</p>\n'}, {'answer_id': 70883910, 'author': 'TylerH', 'author_id': 2756409, 'author_profile': 'https://Stackoverflow.com/users/2756409', 'pm_score': 0, 'selected': False, 'text': '<p>Vhndaree <a href="https://stackoverflow.com/a/70835307/2756409">posted an interesting implementation of this</a> problem on a duplicate question, which goes a step further than any of the existing answers in that it implements a custom character <em>before</em> the incrementing numbers:</p>\n<blockquote>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code> \n .custom {\n     list-style-type: none;\n }\n .custom li {\n     counter-increment: step-counter;\n }\n .custom li::before {\n     content: \'(\' counter(step-counter) \')\';\n     margin-right: 5px;\n }\n \n </code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code> \n &lt;ol class="custom"&gt;\n    &lt;li&gt;First&lt;/li&gt;\n    &lt;li&gt;Second&lt;/li&gt;\n    &lt;li&gt;Third&lt;/li&gt;\n    &lt;li&gt;Fourth&lt;/li&gt;\n    &lt;li&gt;Fifth&lt;/li&gt;\n    &lt;li&gt;Sixth&lt;/li&gt;\n    &lt;li&gt;Seventh&lt;/li&gt;\n    &lt;li&gt;Eighth&lt;/li&gt;\n    &lt;li&gt;Ninth&lt;/li&gt;\n    &lt;li&gt;Tenth&lt;/li&gt;\n &lt;/ol&gt;\n \n </code></pre>\r\n</div>\r\n</div>\r\n</p>\n</blockquote>\n'}]
['https://Stackoverflow.com/questions/10877', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/486/']