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

Question

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

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

Answer 1

简单示例

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

如果你可以使用里面的数字{/ 1}}然后移除div并在position: absolute添加display: inline-block，他们的宽度就会被取消考虑到

Answer 2

使用right: 100%将伪元素的开头放在div

的左侧

＆＃13;

＆＃13;

.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'
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;