Chrome Dev Tools突出显示伪元素悬停的错误区域

Question

我有一个奇怪的问题，当我在这里悬停在伪元素（::before）上时，突出显示似乎已关闭。

给出的CSS是：

.testimonial__quote::before {
      content: open-quote;
      font-size: 11.25rem;
      width: 4.0625rem;
      height: 3.4375rem;
      position: absolute;
      color: #fbce07;
      display: block;
      font-style: italic;
      font-family: Arial, Helvetica, sans-serif;
}

HTML：

<div class="testimonial__quote-container">
  <blockquote class="testimonial__quote">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus lorem eu aliquet fermentum. Vestibulum ante ipsum
    primis in faucibus orci luctus.
  </blockquote>
  <p class="testimonial__author">- Scuderia Ferrari</p>
</div>

正在寻找的是有过这类问题经验的人。我不能像一些人建议的那样发布JSFiddle，因为它不可复制。

Answer 1

这是正常行为。 Jsfiddle。
您为块元素设置了width和height（在您的情况下，它由::before伪元素表示）。但是文本的字体大小太大，符号"“从大小的容器中掉出来”。

在下图中，我删除了width和height属性。现在，根据块内容（"符号）计算块大小。

添加这些样式以查看该字符不适合容器：

overflow: hidden;
outline: 1px solid red;

所以我认为你不应该为这个元素设置width和height。或者您可以使用固定大小的svg元素或图片。

Answer 2

请检查这个小提琴。注意：当您使用position:absolute时，请勿忘记属性top，left，right，bottom，

https://jsfiddle.net/Lbctgyea/5/