Как увеличить высоту выделенного текста?

Question

Я искал Google, но не могу найти способ CSS увеличить высоту фона выделенного текста.

Например, фон выделенного текста в редакторе Atom заметно выше, чем правая:

Поскольку Atom производится с HTML/CSS, мне интересно, если есть сочетание CSS который может достичь этого результата?

Answer 1

Это немного Hacky, но вы можете сделать это с помощью псевдо-элемента (например, ::before), который имеет содержание неразрывный пробел и некоторые дополнения, чтобы создать линию высоты иллюзии:

body { 
 
    background: #000; 
 
    color: #FFF; 
 
} 
 

 
::selection { 
 
    background: red; 
 
} 
 

 
p::before { 
 
    content: "\00a0"; 
 
    padding: 10px 0; 
 
    display: inline-block; 
 
}

This is default text 
 

 
<p>This text has a pseudo element</p>

jsFiddle: https://jsfiddle.net/azizn/8bmj4dm1/

Оговорка: это потребует закручивания каждой строки в теге , Вероятно, вы можете использовать JavaScript для автоматического переноса каждой строки в теге, чтобы это работало с многострочным контентом.