<p>I can't be sure if my code is sucking, or if it's just that the browsers haven't caught up with the spec yet.</p>

<p>My goal is to simulate list markers using generated content, so as to get e.g. continuation of the counters from list to list in pure CSS.</p>

<p>So the code below, which I <em>think</em> is correct according to <a href="http://www.w3.org/TR/CSS2/generate.html#markers" rel="nofollow noreferrer">the spec</a>, is like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
  counter-reset: myCounter;
}
li {
  counter-increment: myCounter;
}
li:before {
  content: counter(myCounter)". ";
  display: marker;
  width: 5em;
  text-align: right;
  marker-offset: 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;
  &lt;li&gt;The&lt;li&gt;
  &lt;li&gt;quick&lt;/li&gt;
  &lt;li&gt;brown&lt;/li&gt;
&lt;/ol&gt;
&lt;ol&gt;
  &lt;li&gt;fox&lt;/li&gt;
  &lt;li&gt;jumped&lt;/li&gt;
  &lt;li&gt;over&lt;/li&gt;
&lt;/ol&gt;</code></pre>
</div>
</div>
</p>

<p>But this doesn't seem to generate markers, in either FF3, Chrome, or IE8 beta 2, and if I recall correctly not Opera either (although I've since uninstalled Opera).</p>

<p>So, does anyone know if markers are <em>supposed</em> to work? Quirksmode.org isn't being its usual helpful self in this regard :(.</p>

[{'answer_id': 50201, 'author': 'knuton', 'author_id': 4991, 'author_profile': 'https://Stackoverflow.com/users/4991', 'pm_score': 3, 'selected': True, 'text': '<p>Apparently marker was introduced as a value in CSS 2 but did not make it to CSS 2.1 because of lacking browser support.\nI suppose that didn’t help its popularity …</p>\n\n<p>Source: <a href="http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display" rel="nofollow noreferrer">http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display</a> (German)</p>\n'}, {'answer_id': 50271, 'author': 'Domenic', 'author_id': 3191, 'author_profile': 'https://Stackoverflow.com/users/3191', 'pm_score': 1, 'selected': False, 'text': '<p>Oh ouch, did not know that :-|. That probably seals its case, then. Because mostly I was under the assumption that such a basic CSS2 property should definitely be supported in modern browsers, but if it didn\'t make it into CSS 2.1, then it makes a lot more sense that it isn\'t.</p>\n\n<p>For future reference, it doesn\'t show up <a href="http://developer.mozilla.org/en/CSS/display" rel="nofollow noreferrer">in the Mozilla Development Center</a>, so presumably Firefox doesn\'t support it at all.</p>\n\n<p>Also for future reference, I got my original example to work with <code>inline-block</code> instead:</p>\n\n<pre><code>li:before\n{\n    content: counter(myCounter)". ";\n    display: inline-block;\n    width: 2em;\n    padding-right: 0.3em;\n    text-align: right;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/50170', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3191/']