How can you customize the numbers in an ordered list?

Related searches

How can I left-align the numbers in an ordered list?

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

Change the character after the number in an ordered list?

1) an item

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

I am mostly interested in answers that work on Firefox 3.

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):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

Custom List Number Styling, Numbering in HTML Order List Style. Using CSS counter increment can increase the number. To customize the text like word document we can use css “content”. Get more idea about css counter please look at the link. This style shows you just some of the ways you can customize the appearance of the numbers in your ordered lists. There’s plenty more you can do, so feel free to use all the CSS you know to create interesting, fun and beautiful ordered lists. You can find a complete, working example, of this technique on CodePen.

The CSS for styling lists is here, but is basically:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

However, the specific layout you're after can probably only be achieved by delving into the innards of the layout with something like this (note that I haven't actually tried it):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

HTML ordered list custom numbering, If you want to number items in order, you can use the <ol> (ordered list) tag. But it is kind of hard to style those list numbers in CSS. There is an easier way to create a number styled list of item using the :before pseudo element along with counter properties. To create ordered list in HTML, use the tag. Ordered list starts with the tag. The list item starts with the tag and will be marked as numbers, l

You can also specify your own numbers in the HTML - e.g. if the numbers are being provided by a database:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}
<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

Styling ordered list numbers, In this article, I'll share with you how to customise your lists to make them look more aesthetically pleasing with CSS Counters. Numbers in� Home » CSS » HTML Ordered List Customization. Styling Line Numbers. If you’ve ever tried to customize the numbers of the HTML. element items, you may have noticed some issues. There’s no way you to use CSS selectors to get the goal.

Stole a lot of this from other answers, but this is working in FF3 for me. It has upper-roman, uniform indenting, a close bracket.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>

Create beautiful numbered lists with CSS Counters, Ordered lists have numbers for each list-item (li), while unordered lists do not have numbers. Unordered lists are generally used for many different things, like site navigation, widgets with links, bullet-point lists, or any place a set of links might show up. Ordered lists are usually used in body content, like in the middle of a blog post.

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,

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.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

But you're going to have to experiment to find the exact solution.

To create ordered list in HTML, use the tag. Ordered list starts with the tag. The list item starts with the tag and will be marked as numbers, l

Ordered list. An ordered list is a numbered list. An ordered list can be used whenever a list requires sequence. Let's assume we want to create an ordered list that displays how Tom likes six colors, the most important color is listed first and the next most important color is listed second, etc.

Lower and upper case Roman numbers. To use Roman numbers instead, specify type="I" for uppercase Roman numbers (e.g. I II III IV V etc) and type="i" for lowercase Roman numbers (e.g. i ii iii iv v). Here’s an example of an ordered list using lowercase Roman numbers: Apples; Bananas; Oranges; And the HTML behind it:

I'm trying to find a way to style the numbers in a ordered list, I'd like to add background-color, border-radius and color to them so they can match the design I'm working from: I'm guessing it's not possible and that I'll have to use different images for each number i.e.

Comments
  • Needed to add the numbers back in, a global style was removing them (who knows why you would use a ol and remove the numbers rather than a ul??). Very clear answer +1 for full explanation and code, can easily be modified to do anything.
  • I suggest a cleaner CSS margin/padding solution, that works better with lists having wide numbering: ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
  • This gets the numbers lined up, but the text content isn't.
  • You can simplify this if you just use the value attribute on <li>. e.g. <li value="20">. Then you don't need any pseudo elements. Demo
  • @GWB While that is valid (and a good solution), it's limited to numerical values as the list is ordinal. As such, you can't do something like value="4A", as it won't work. Additionally, the value attribute can work with the type attribute, but value still must be a number (as it works within an ordered set).
  • Thanks - this worked for me when I needed Flying Saucer to show a list in reverse order (reversed attribute is html5 only, as is using the value of the li). Instead of using your seq I set a value and used attr(value) instead of attr(seq)
  • you'll need a counter-reset: item; before that block.
  • Also you want text-align: left; not right. And the last line should be margin-left: -3.5em;
  • @grom, Thanks for the em correction. Also, Opera renders lists right-aligned by default, so I mimicked this behavior.
  • @grom, The Firefox issue is ... Firefox puts the li:before pseudoelement on its own line without the float, even if it is display: inline-block.
  • @strager, Well I am using 3.0.4 on Linux and 3.0.3 on Windows, and it works for me without the float: left; rule.