html - 是否可以使用 css 将可变宽度的伪元素内容添加到 div 的/左侧？

Question

我正在使用伪元素为编号列表(由 div 构成)创建样式化数字。是否可以将数字放在 div 的左侧？

使用position:absolute； left: 1em 将不起作用，因为它没有考虑数字的实际宽度。

Answer 1

简单的例子

fiddle :http://jsfiddle.net/63pc4y57/1/

HTML

<div>one</div>
<div>two</div>
<div>three</div>

CSS

body
{
    counter-reset: divs;
}

div
{
    background: grey;
    color: black;
    height: 5em;
    line-height: 5em;
    margin-left: 2em;
    width: 5em;
    counter-increment: divs;
    position: relative;
}

div:before
{
    background: lightgrey;
    content: counter(divs);
    left: -1em;
    position: absolute;
    width: 1em;
}

如果您可以使用 inside div 中的数字，则删除 position: absolute 并添加 display: inline-block div:before 它们的宽度将被考虑在内