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

Question

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

使用 position: absoulute; 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;
}

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

Answer 2

使用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>

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

Is it possible to add variable width pseudo-element content to the /left/ of a div with css?

html

css

list

pseudo-element