CSS3 Making :before content not highlightable

Okay, so I've been working on a project that has CSS line numbers. When users highlight/select text the numbers get highlighted/selected as well. Luckily the :before content doesn't get copied with it, but it still annoys me. Is there any way to fix this.

What I have tried:

user-select: none;

//AS WELL AS

div p:before::selection {

background-color: transparent;

}

This is some example code:

div {
    counter-increment: line;
}

div p:before {
    content: counter(line);
}

What it looks like now: enter image description here

What it should look like: enter image description here