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

请检查这个小提琴。注意：当你使用qazxsw poi时不要忘记属性top，left，right，bottom，

position:absolute