title: html css styled ordered list, positioned outside and with custom counter
body: <p>For an academic website, I would like to maintain a list of publications sub-divided by type (journal article, conference paper, workshop paper, etc), and uniquely numbered according to the publication type, so that I can reference them throughout the website.</p>
  
  <pre><code>Margin | Body
         |
         | ## Conference Papers
    [C1] | Conference paper 1
    [C2] | Conference paper 2
         |
         | ## Journal Articles
    [J1] | Journal Article 1
  </code></pre>
  
  <p>I would like the numbering to appear in the margin. I can achieve this by using the <code>list-style-position:outside;</code> attribute. However, this won't work if I use the <code>list-style: none;</code> attribute, to achieve the custom numbering (eg. C1, instead of 1.) Is it possible to position the numberings outside the main text area when using custom lists?</p>
  
  <p>Edit: Code</p>
  
  <pre><code>ol {
      list-style: none; counter-reset: item 1;
  }
  ol li:nth-of-type(1){
      font-weight: normal;
  }
  ol li{
      list-style-position:outside;
      margin-left: 0px; 
      padding-left: 0px;
  }
  ol li:before {
      content: "[C" counter(item) "] "; 
      color: green;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ol&gt;
      &lt;li&gt;Conference Paper 1&lt;/li&gt;
      &lt;li&gt;Conference Paper 2&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>