HTML + CSS: Ordered List without the Period?
HtmlCssSeparatorHtml ListsHtml Problem Overview
I think the answer to this question is no... but does anyone know of a an HTML/CSS way to create an ordered list without a period after the numbers? Or, alternatively, to specify the separator character?
Ideally I don't want to do list-style-image with a different class for each number, but that's all I've been able to think of so far... That seems terribly unsemantic.
IE:
Default Style:
1. ______
2. ______
3. ______
Desired Style:
1 ______
2 ______
3 ______
Alternate Style:
1) ______
2) ______
3) ______
Html Solutions
Solution 1 - Html
This is perfectly possible to do with just CSS (2.1):
ol.custom {
list-style-type: none;
margin-left: 0;
}
ol.custom > li {
counter-increment: customlistcounter;
}
ol.custom > li:before {
content: counter(customlistcounter) " ";
font-weight: bold;
float: left;
width: 3em;
}
ol.custom:first-child {
counter-reset: customlistcounter;
}
Keep in mind that this solution relies on the :before pseudo-selector, so some older browsers -- IE6 and IE7 in particular -- won't render the generated numbers. For those browsers, you'll want to add an extra CSS rule that targets just them to use the normal list-style:
ol.custom {
*list-style-type: decimal; /* targets IE6 and IE7 only */
}
Solution 2 - Html
Here is the solution
https://stackoverflow.com/questions/2729927/number-nested-ordered-lists-in-html
All you have to to is change a little bit here
ol li:before {
content: counter(level1) " "; /*Instead of ". " */
counter-increment: level1;
}
^^
Solution 3 - Html
I just found a workaround for cases where you want to simply remove the dot. Not the best solution ever, but it's done with only CSS and works in every browser. The downside is that you need the textnode in the LI to be wrapped into another tag (<span> or something). In my own case, the <ol> was used as a list of links, so I could use my <a> tags !
The CSS I used :
ol li a {
float: right;
margin: 8px 0px 0px -13px; /* collapses <a> and dots */
padding-left: 10px; /* gives back some space between digit and text beginning */
position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}
Solution 4 - Html
This can be achieved using the ::marker
CSS pseudo element, which has pretty good browser support.
Note however, that Safari has an outstanding bug to support the content
property, so this approach will not work there. In some cases this might be okay since the fallback behavior will just display the extra period.
ol { counter-reset: my-counter-name; }
li { counter-increment: my-counter-name; }
li::marker { content: counter(my-counter-name); }
Solution 5 - Html
The above solutions all have drawbacks for some lists: multiline items, multidigit item numbers, custom background, etc.
It's cleaner to use the built-in list-item
counter instead of a custom counter:
ol.dotless {
list-style-type: none;
margin-left: 0;
}
ol.dotless > li:before {
content: counter(list-item) "\A0";
float: left;
text-align: right;
width: 1.5em;
}
But this approach does not work with multiline items.
There is a new method that allows you to directly format a counter, but so far, it only works in Firefox:
ol.dotless {
list-style: dotless-item
}
@counter-style dotless-item {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
suffix: " ";
}
The only method I've come across that works in all cases is a table
that mimics an ol
:
table.dotlessol {
margin: 0.25em 1.25em;
border-spacing: 0;
counter-reset: dotless;
}
table.dotlessol tr {
vertical-align: top;
counter-increment: dotless;
}
table.dotlessol td {
padding: 0;
}
table.dotlessol td:first-child {
text-align: right;
padding-right: 0.5em;
}
table.dotlessol td:first-child::before {
content: counter(dotless);
}
Use two td
s in each row, leave the first td
empty, and put the item text in the second td
.
Solution 6 - Html
You can add the numbers later using jQuery:
$("ul").each(function() {
$(this).find("li").each(function(index) {
$(this)
.css("list-style-type", "none")
.prepend("<div class='listnumber'>" + (index + 1) + "</div>");
})
})
Try the sample here.
More info on jQuery here.
Solution 7 - Html
This is the simplest solution without counter-increment and inline tags inside li:
ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}