垂直对齐导致高光重叠,使文字难以辨认

时间:2016-08-28 12:21:40

标签: html css vertical-alignment pseudo-element

我有一个小提琴here使用$(".label").hover( function() { $(this).hide(); }, function() { $(".mask").show(); }); :after来插入引号。

问题是,当您突出显示整个段落时,突出显示重叠并使某些单词难以识别。

我需要引号是那个大小并且在那个位置,有没有办法阻止突出显示使文本不可见?

1 个答案:

答案 0 :(得分:3)

dipslay: inline-blockafter before,然后你就去了!

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>