I'm trying to write a code snippet for an app (Obsidian.md) to display line numbers for each paragraph in a preview mode. I can't edit the HTML, only the CSS, so I figured I'd use a CSS counter and just have the count show before each paragraph:
.workspace {
counter-set: line;
}
.workspace p::before {
content: counter(line);
counter-increment: line;
}
The counter displays and it does increment up to a point. However, when I scroll down, the counter stops working properly.
My example text is 116 lines. I can see 25 lines at a time and when I scroll, it will show 25 consecutive numbers with the last line showing a number anywhere between 39 and 60 (the slower I scroll, the higher it goes, but never past 60). I can see the numbers changing as I scroll.
If I select the text from the first line on down before/while scrolling, I can get it to display the proper count for the final lines (up to 116). If I select text from the second line on down, it will display the proper count minus one (up to 115).
I've tried changing the class in which the counter is set to various parent and child classes of workspace with no effect on this particular issue. It also doesn't seem to be the counter truly resetting, given that it never goes back to 1 or 0.
Is it possible that the counter "forgets" some (but not all) of the lines no longer on the viewer? If so, is there a way for me to make it stop with CSS alone?