Replace ordered list number with prefixed value using CSS and HTML
I am trying to create a style sheet to support the display of a legal document with articles, sections, subsections, etc. I would like the outer most ordered list to display "Article n:" instead of the value "1." Similarly, I'd like the second level to display "Section n - ". All other subordinate levels should display the OL style type value as defined.
I found a similar question here How can I prefix ordered list item numbers with a static string using CSS?. Though the answer was accepted but the person asking the question, I could not get it to work. I am using Firefox 3.6.22.
The code:
<head>
<style type="text/css">
ol {
counter-reset: item;
list-style-type: decimal;
}
ol li:before {
content: 'Article ' counter(item, decimal) ': ';
counter-increment: item;
}
</style>
</head>
<body>
<ol>
<li>Apples</li>
<li>Oranges</li>
</ol>
</body>
The desired result and the one the above question implied worked is: Article 1: Apples Article 2: Oranges
Instead, I see:
1. Article开发者_开发问答 1: Apples 2. Article 2: OrangesIf I can get this basic piece to work then I can extend the solution to include the nested levels by using different selectors (i.e. ol ol, and ol ol li). But that is all predicated on removing the leading ordered list value.
What am I missing?
just just have to switch off the default numeration (and reapply a custom numeration like you already do):
ol {
counter-reset: item;
list-style-type: none;
}
take a look at this example.
加载中,请稍侯......
精彩评论