html - 定位订单列表的 lower-alpha bullets bullets

Question

使用下面的 CSS，我可以获得一个列表，该列表使用每边带有大括号的小字母元素符号，但现在计数器似乎在内容中没有分隔，所以它看起来像:

发生了什么:

(a) this is my content in the list item
that has the bullets inlined with the 
content

我想要什么:

(a) this is what I'd rather have that
    occurs in native lists, but doesn't
    have lower-alpha with braces 

CSS:

ol {
    counter-reset: list;
    margin: 0;
    padding: 25px;
}

ol > li {
    list-style: none;
    position: relative;
}

ol > li:before {
    counter-increment: list;
    content: "(" counter(list, lower-alpha) ") ";
/*    position: absolute;
    left: -1.4em;*/
}

Answer 1

看来你已经做到了。如果左边有 padding 作为位移，你可以绝对定位伪元素 relative 到父元素:

ol {
    counter-reset: list;
    padding: 0;
}
ol > li {
    list-style: none;
    position: relative;
    padding-left: 2em;
}
ol > li:before {
    counter-increment: list;
    content:"(" counter(list, lower-alpha)") ";
    position: absolute;
    left: 0;
}

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus elit nec tortor facilisis varius. Quisque id elit sollicitudin nunc bibendum aliquet id in massa. Nam mattis est at hendrerit pretium. Vivamus tempus interdum dolor, eu dictum enim auctor sit amet. Mauris quis finibus dolor</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus elit nec tortor facilisis varius. Quisque id elit sollicitudin nunc bibendum aliquet id in massa. Nam mattis est at hendrerit pretium. Vivamus tempus interdum dolor, eu dictum enim auctor sit amet. Mauris quis finibus dolor</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus elit nec tortor facilisis varius. Quisque id elit sollicitudin nunc bibendum aliquet id in massa. Nam mattis est at hendrerit pretium. Vivamus tempus interdum dolor, eu dictum enim auctor sit amet. Mauris quis finibus dolor</li>
</ol>