代码之家 › 专栏 › 技术社区 › Nevin

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

google-chrome-devtools google-chrome css html

Nevin · 技术社区 · 6 年前

我有一个奇怪的问题,当我悬停在伪元素上时( ::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>

我要找的是有过类似经历的人。我不能像一些人建议的那样发布JSFIDLE,因为它是不可复制的。

2 回复 | 直到 6 年前

3rdthemagical 6 年前

这是正常的行为。 Jsfiddle 。
您已设置 width 和 height 对于块元素(在您的情况下,它由 ::before 伪元素)。但文字字体太大,符号太多 " 大小容器“脱落”。

在下面的图片中,我删除了 宽度 和 身高 属性。现在,根据块内容计算块大小(它是 “” 符号)。

添加以下样式以查看角色是否适合容器:

overflow: hidden;
outline: 1px solid red;

所以我认为你不应该 宽度 和 身高 到该元素。或者你可以使用 svg 具有固定大小的元素或图像。

Nitin Patil 6 年前

请检查一下这把小提琴。注意:当您使用 position:absolute 不要忘记属性顶部、左侧、右侧、底部,

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前