Skip to content
Go to home

Code Block Line Number

Give line number to code block with CSS

A trick to pre-pend line number to an HTML code element.

Using Vanilla CSS and CSS counter

CSS 
code {
  counter-reset: step;
  counter-increment: step 0;
}

code .line::before {
  /* Style individual code line */
  content: counter(step);
  counter-increment: step;
  margin-right: 1.5rem; /* Margin between line number and actual code element */
}