垂直对齐导致突出显示重叠，使文本难以辨认

Question

我有一个 fiddle here 使用 :after 和 :before 插入引号。

问题是当您突出显示整个段落时，突出显示会重叠并使某些单词难以辨认。

我需要引号的大小和位置，有没有办法防止突出显示使文本不可见？

Answer 1

给 after 和 before 两个 dipslay: inline-block 就可以了！

p:before{
  font-size: 2.5em;
  line-height: 0;
  display: inline-block;
  vertical-align: bottom;
  content: '“';
  margin-right: 0.125em;
}
p:after{
  font-size: 2.5em;
  line-height: 0;
  display: inline-block;
  vertical-align: bottom;
  content: '”';
  margin-left: 0.125em;
}

<p>
Lorem ipsum dolor sit amet, novum errem perfecto id qui, esse antiopam cu sea, eum veniam soleat delicatissimi id. Impedit probatus in sit, quem abhorreant mnesarchum eos ad. Id erat equidem ius. Ne mel scaevola oporteat percipitur, id zril diceret commune cum. Ut mea quodsi labores assentior, populo explicari pro ea. 
</p>

垂直对齐导致突出显示重叠，使文本难以辨认

Vertical align causing highlight to overlap, making text illegible

html

css

vertical-alignment

pseudo-element