How to implement line highlighting so that the text can be selected and copied?

Question

css

There is a small code for syntax highlighting. It's kind of like the developer tools in Google Chrome. When you hover over a specific line, it is highlighted. Looks good. However, line highlighting does not allow text to be selected by swiping horizontally with the cursor.
How can this problem be solved, given that some elements may wrap to other lines?

Answer 1

It's the pseudo-element that follows the .code-line. It covers your selection area.
Adding to properties will help avoid this. .code-line:afterpointer-events: none;