Line number alignment issues

[robcaldecott]

With line numbers enabled, the line numbers do not right-align, and when they get to double figures, it breaks the code alignment.

This is using default styles:

pre code {
  counter-reset: sh-line-number;
}

.sh__line::before {
  counter-increment: sh-line-number 1;
  content: counter(sh-line-number);
  margin-right: 24px;
  text-align: right;
  color: #a4a4a4;
}

The only way I can make it work is to apply inline-block and a fixed width to .sh__line::before, e.g.:

.sh__line::before {
  display: inline-block;
  min-width: 32px;
}

Is this how everyone else is solving this issue or is there a better way that sizes each line number based on the line count?

Thanks.