html css樣式的有序列表，位於外部並帶有自定義計數器

Question

對於學術網站，我想維護一份出版物列表，該出版物按類型細分（期刊文章，會議論文，研討會論文等），並根據出版物類型進行唯一編號，以便我可以在整個網站中引用它們。

Margin | Body
       |
       | ## Conference Papers
  [C1] | Conference paper 1
  [C2] | Conference paper 2
       |
       | ## Journal Articles
  [J1] | Journal Article 1

我希望編號出現在空白處。 我可以通過使用list-style-position:outside;來實現list-style-position:outside; 屬性。 但是，如果我使用list-style: none; ，則此方法將無效list-style: none; 屬性，以實現自定義編號（例如C1，而不是1）。使用自定義列表時，是否可以將編號定位在主文本區域之外？

編輯：代碼

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;
}

HTML：

<ol>
    <li>Conference Paper 1</li>
    <li>Conference Paper 2</li>
</ol>

Answer 1

嘗試為ol li:before添加邊距ol li:before

ol li:before {
    content: "[C" counter(item) "] "; color: green; 
    margin-left: -1em; 
    margin-right: .65em;
}

演示

Answer 2

您還可以before偽元素before設置position: absolute ，在li上position: relative ，然后將前者相對於其父級放置。

演示