Chrome 开发工具突出显示伪元素悬停的错误区域答案

【问题标题】：Chrome Dev Tools highlights the wrong area for a pseudo-element's hoverChrome 开发工具突出显示伪元素悬停的错误区域
【发布时间】：2018-03-06 23:46:22
【问题描述】：

我有一个奇怪的问题，当我将鼠标悬停在此处的伪元素 (::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，因为它不可重现。

【问题讨论】：

Do not post images of code or errors! 图片和屏幕截图可以很好地添加到帖子中，但请确保帖子在没有它们的情况下仍然清晰有用。如果您发布代码或错误消息的图像，请确保您也复制并粘贴或直接在帖子中输入实际代码/消息。
请添加一些能显示问题的小提琴。
@JohannesPiontkowitz 小提琴会尽快解决这个问题。标记和代码必须以文本形式出现在问题本身中。
@Johannes 这在小提琴上无法重现，因此我无法在此处链接任何内容。
@Rob 他可以添加一个代码片段，这样他就有了代码和一个示例。

标签： html css google-chrome google-chrome-devtools

【解决方案1】：

这是正常行为。 Jsfiddle.
您为块元素设置width 和height（在您的情况下，它由::before 伪元素呈现）。但是文本的 font-size 太大，符号 " 从大小容器中“脱落”。

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

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

overflow: hidden;
outline: 1px solid red;

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

【讨论】：

嘿伙计，谢谢！这可能是答案。我明天早上去看看！
OP 还设置了display: block，这会强制文本换行。
@3rdthemagical 一个后续问题。即使在您的小提琴上，即使在删除宽度和高度后，蓝色悬停也不会完全覆盖引号。还显示：块导致问题？有什么解决办法？
谢谢伙计！这是这些角色的正常行为。

【解决方案2】：

请检查这个小提琴。注意：当你使用position:absolute时不要忘记属性top,left,right,bottom,

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

【讨论】：

您需要在您的答案中发布您的标记和代码，而不是 jsfiddle 和图像。小提琴可以赞美你的例子，但不能代替它。
感谢试用者，但我认为@3rdmagical 的回答是准确的。