He estado tratando de crear una página html que muestre un bloque de código con números de línea. He usado la propiedad de visualización de celdas de tabla CSS para mostrar la línea junto con el número de línea en formato de celda. Pero la línea se muestra después del número de línea y quiero que se alinee en la misma línea. La visualización de CSS Grid funciona correctamente; sin embargo, con Chrome no admite más de 1000 líneas. Por favor ayúdeme a resolver esta situación.
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>Debe establecer display: table en la etiqueta del contenedor (en su caso, es pre) y display: table-cell en el tramo secundario