Избегайте перекрытия выделенного фрагмента с CSS

Question

Как избежать перекрытия выделения при выделении текста, у которого line-height меньше, чем font-size?

*::selection {
  background-color: grey;
}

p {
  font-size: 24px;
  line-height: 20px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Единственный способ, которым я смог решить эту проблему, - это создать background-color transparent и просто изменить цвет текста. Однако я бы хотел, чтобы цвет фона остался.

Пример

*::selection {
  background-color: transparent;
  color: red;
}

p {
  font-size: 24px;
  line-height: 20px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Answer 1

Я не думаю, что есть способ, фон выделения должен покрывать весь алфавит, включая все специальные символы, такие как ƒ, È, ¡и т. Д.

Пример выбора