如何增加所选文本背景的高度？

Question

我一直在寻找谷歌，但找不到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自动包装标记中的每一行，以便使用多行内容。