Как реализовать подсветку строки, чтобы текст можно было выделить и скопировать?

Question

[Александр]

Имеется небольшой код для подсветки синтаксиса. Чем то напоминает инструменты разработчика в Google Chrome. При наведении курсора на определенную строку она подсвечивается. Выглядит неплохо. Однако, подсветка строки не позволяет выделять текст, проведя горизонтально курсором.
Как можно решить эту проблему с учетом, что некоторые элементы могут переноситься на другие строки?

Answer 1

[KazeZlat]

Дело в псевдоэлементе, который следует за .code-line. Он у вас перекрывает область выделения.

Добавление к .code-line:after свойства pointer-events: none; поможет этого избежать.

Comments

[Александр]

Если запретить pointer-events, то подсветка строки останется только непосредственно над .code-line, но не на всей строке. Если при этом задать z-index:-1, то строка начнёт неприятно мерцать при перемещение курсора по строкам.

[KazeZlat]

Александр, ну тогда текст в .code-line оберните в span какой-нибудь и ему дайте z-index больше, чем у псевдоэлемента.

[Александр]

Следующий код позволили реализовать задуманное

&-line {
        position: relative;
        display: inline-block;
        
        & > &-content {
            position: relative;
            z-index: 1;
        }
        
        &:after {
            content: "";
            @include lineover;
            opacity: 0;            
        }
        
        &:hover {
            &:after {
                opacity: 0.5;
            }
        }
    }

UPDATE: При рефакторинге кода удалил старую версию фидла. Отредактировать вопрос не удалось. В комментариях актуальная версия.