css counter with :;before width

by ian_smithz

HTML

<code>
    <div class="line"><span>line 1</span></div>
    <div class="line"><span>line 2</span></div>
    <div class="line"><span>line 3</span></div>
    <div class="line"><span>line 4</span></div>
    <div class="line"><span>line 5</span></div>
    <div class="line"><span>line 6</span></div>
    <div class="line"><span>line 7</span></div>
    <div class="line"><span>line 8</span></div>
    <div class="line"><span>line 9</span></div>
    <div class="line"><span>line 10</span></div>
    <div class="line"><span>line 11</span></div>
    <div class="line"><span>line 12</span></div>
    <div class="line"><span>line 13</span></div>
    <div class="line"><span>line 14</span></div>
    <div class="line"><span>line 15</span></div>
</code>

CSS

code {
    display: inline-block;
    border: 1px black solid;
    padding: 1em;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    counter-reset: line;
}

code .line {
    display: block;
    counter-increment: line;
}

code .line::before {
    display:inline-block;
    width:2em;
    border-right: 1px black solid;
    padding-right: 1em;
    margin-right: 1em;
    content: counter(line);
}