Create line numbers on pre with CSS only

Question

I try to style a code pre box with line numbers in front of each line. I prefer to do it with CSS only. This is what I have done

Answer 1

You have to increment line in your span:

pre span {
    display: block;
    line-height: 1.5rem;
    counter-increment: line;
}

Have a look at this updated jsfiddle.