Contar lineas de un texto con CSS3

[guardarmicorreo]

Hola a todos. Tengo un problema que no sé cómo resolver sin utilizar javascript.

Construyendo mi blog, vi la necesidad de un highlighter para el código que vaya poniendo en mis artículos.

El problema es que el highlighter que uso no muestra el número de líneas, por lo tanto las quiero añadir yo manualmente.

Encontré que con CSS se pueden contar elementos utilizando counter-reset, counter-increment y content.

Pero no logro contar líneas de código en vez de elementos HTML.

Este es mi código CSS3; utilizo las etiquetas pre y code porque el highlighter utiliza esas dos etiquetas para activar la decoración del texto.

Con este código solo me muestra 1 en la primera línea, pero no el resto de líneas, esto supongo porque el código indica que cuente los code, no las líneas dentro del code.

Código CSS:

pre{
   counter-reset: lineas;
}
 
code{
   padding: 1em;
   counter-increment: lineas;
}
        
code:before {
   content: counter(lineas);
   display: inline-block;
   border-right: 1px solid #ddd;
   padding: 0 .5em;
   margin-right: .5em;
   color: #888
}
 

Entonces mi pregunta es ¿Hay alguna manera de hacer referencia a cada línea de texto siendo que ese texto se encuentra dentro de un parent pre y un hijo code?

¿Hay alguna otra manera de resolver esto con CSS? Me ciño a CSS para no aumentar la carga de la web.

Saludos.