I have been trying to build a html page which shows a code block with line numbers. I have used CSS table-cell display property to display the line along with line number in cell format. But the line gets displayed after the line number and I want it to be aligned in the same line. CSS Grid display works properly however with Chrome it doesn't support more than 1000 lines. Please help me resolve this issue.
pre {
counter-reset: line 0;
display: table-cell;
grid-template-columns: min-content 1fr;
grid-auto-rows: 1em;
gap: 0.3em;
}
.line-number {
text-align: right;
}
.line-number::before {
counter-increment: line;
content: counter(line);
white-space: pre;
color: #888;
padding: 0 .5em;
border-right: 1px solid #ddd;
}<pre>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
</pre>You should set display: table to the container tag (in your case it's pre) and display: table-cell to the child span