1

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.

avv
  • 733
  • 1
  • 8
  • 19
  • Not exactly a duplicate but you maybe interested in this http://stackoverflow.com/questions/26997532/using-css-to-style-a-numbered-list/27009218#27009218 - It is something related/similar. – Harry Jan 04 '15 at 09:48
  • Set a width on the pseudo element ? – sodawillow Jan 04 '15 at 10:06

2 Answers2

1

Simple example

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;
}

If you can use the numbers inside the div's then remove position: absolute and add display: inline-block on div:before their width will be taken into account

sodawillow
  • 12,497
  • 4
  • 34
  • 44
0

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>
ckuijjer
  • 13,293
  • 3
  • 40
  • 45
  • Thanks! That's perfect. Now I wonder if there is a way to automatically add enough padding in the container div so that all the numbers fit in it. But I think that might be too much to ask from pseudo-elements... – avv Jan 04 '15 at 19:31
  • If you want the boxes to be aligned, I don't think you can – ckuijjer Jan 04 '15 at 19:48