如何获得CSS计数器的悬挂缩进列表？
如何获得CSS计数器的悬挂缩进列表？
提问于 2016-06-13 22:58:09
我正在尝试建立一个带有CSS计数器的3级有序列表。
ol {
counter-reset: paragraph;
list-style-type: none;
margin-bottom: 1em;
font-weight: bold;
}
ol > li::before {
counter-increment: paragraph;
content: "§" counter(paragraph) " ";
}
...有没有办法精确地缩进第一级和第二级？
我知道有一种方法可以像这样
text-indent: -10px; padding-left: 10px;但是计数器的大小会随着字体大小或数字的增加而变化。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-14 15:12:07
@Paulie_D通过定位伪元素得到了正确的结果：
ol > li {
position: relative;
}
ol > li::before {
counter-increment: paragraph;
content: "§" counter(paragraph) " ";
position: absolute;
left: -1.5em;
}http://codepen.io/Paulie-D/pen/oLxGeW
谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37793048
复制相关文章
相似问题