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

advertisements

I am using pseudo-elements to create styled numbers for a numbered list (made of divs). Is it possible to have the numbers to the left of the divs?

Using position: absoulute; left: 1em won't work, since it doesn't take into account the actual width of the numbers.


Use right: 100% to put the start of the pseudo element at the left side of the 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>