alexchenco alexchenco - 1 year ago 71
HTML Question

How to increase the height of the selected text's background?

I've been looking around Google but can't find a CSS way to increase the height of the background of selected text.

For example the background of the selected text in the Atom editor is noticeably higher than the right one:

enter image description here

Since Atom is made with HTML/CSS, I wonder if there's a combination of CSS which can achieve this result?

Answer Source

This is a bit hacky but you could do it by using a pseudo element (like ::before) that has a content of non-breaking space and some padding to create the line-height illusion:

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>


Caveat: this will require wrapping each line in a tag. You could probably use JavaScript to automatically wrap each line in a tag for this to work with multi-line content.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download