HTML + CSS: Ordered List without the Period?
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 */
}
Here is the solution
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;
}
^^
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 ! */
}