是否可以使用css将可变宽度的伪元素内容添加到div的/ left /中？

Question

我使用伪元素为编号列表（由div制成）创建样式编号。是否有可能在divs左边的数字？

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

Answer 1

使用right: 100%把伪元素开始在的左侧div

.box { 
 
    border: 1px solid #c66; 
 
    background: #f99; 
 
    position: relative; 
 
    width: 100px; 
 
    height: 20px; 
 
    margin: 20px; 
 
} 
 

 
.box:before { 
 
    position: absolute; 
 
    right: 100%; 
 
    margin-right: 5px; 
 
} 
 

 
.box--one:before { 
 
    content: '1' 
 
} 
 
.box--two:before { 
 
    content: '2' 
 
} 
 
.box--ten:before { 
 
    content: '10' 
 
}

<div class="box box--one"> 
 
</div> 
 
<div class="box box--two"> 
 
</div> 
 
<div class="box box--ten"> 
 
</div>

Answer 2

简单的例子

小提琴：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; 
} 

如果你可以使用数字内的div的然后删除position: absolute并添加div:beforedisplay: inline-block其宽度将考虑