html - 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 .
您为 block 元素设置 width 和 height (在您的情况下，它由 ::before 伪元素呈现)。但是文本的字体太大，符号 " 从大小容器中“掉出来”。

---

在下图中，我删除了 width 和 height 属性。现在 block 大小是根据 block 内容计算的(它是 " 符号)。

---

添加这些样式可以看出 Angular 色不适合容器:

overflow: hidden;
outline: 1px solid red;

---

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