1

对于一个学术网站，我想维护一个按类型（期刊文章、会议论文、研讨会论文等）细分的出版物列表，并根据出版物类型唯一编号，以便我可以在整个网站上引用它们.

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

我希望编号出现在页边空白处。我可以通过使用list-style-position:outside;属性来实现这一点。但是，如果我使用该属性来实现自定义编号（例如 C1，而不是 1），这将不起作用list-style: none;。使用自定义列表时是否可以将编号定位在主文本区域之外？

编辑：代码

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>
4

2 回答 2

4

尝试为ol li:before

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

演示

于 2013-07-01T11:50:49.170 回答
4

you can also set position: absolute on the before pseudo-element and position: relative on the li and then position the former relatively to its parent.

DEMO

于 2013-07-01T11:52:40.673 回答