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: 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 {
    content: "[C" counter(item) "] "; color: green; 
    margin-left: -1em; 
    margin-right: .65em;
}

<强> DEMO

Answer 2

您还可以在position: absolute伪元素上设置before，在position: relative设置li，然后将前者相对于其父级设置。

DEMO

html css样式有序列表，位于外部并带有自定义计数器

2 个答案: