John John - 3 months ago 11
CSS Question

Vertical align causing highlight to overlap, making text illegible

I have a fiddle here using

:after
and
:before
to insert quotes.

The problem is when you highlight the entire paragraph, the highlight overlaps and makes some words illegible.

I need the quotes to be that size and in that position, is there a way to prevent the highlighting from making the text invisible?

Answer

Give dipslay: inline-block to both after and before and there you go!

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>