CSS :first-line伪类在Safari生效但Firefox/Chrome失效问题咨询

首先咱们来拆解下你遇到的问题：

你的核心需求是给hover时显示的人员信息里的「姓名」设置加粗放大样式，但你的选择器目标错了——你写的#gallery_thumb_xxx:first-line是给原元素本身的第一行内容加样式，可你要样式化的文本其实是放在::after伪元素的生成内容里的。

Safari在处理时可能把伪元素的内容合并到了原元素的内容流中，所以:first-line意外生效了；但Chrome和Firefox严格区分了原元素和伪元素的内容边界，所以这个选择器根本没作用到你想要的文本上，这就是为什么只有Safari能用的原因。

另外，你的CSS末尾多了一个多余的闭合}，建议删掉避免解析错误。

方案1：修正选择器（快速调整） #

把:first-line伪类直接应用到hover状态下的::after伪元素上，这样就能精准选中生成内容的第一行：

#gallery_thumb_6016969275:hover:after:first-line,
#gallery_thumb_6016969375:hover:after:first-line,
#gallery_thumb_6016969475:hover:after:first-line,
#gallery_thumb_6016969575:hover:after:first-line {
    font-size: 18px;
    font-weight:bold;
}

这个调整在Chrome和Firefox中就能正常生效，和Safari的表现保持一致。

方案2：拆分伪元素（更稳定兼容） #

如果担心浏览器对伪元素+:first-line的组合支持有差异，更稳妥的方式是把「姓名」和「职位」拆成两个伪元素分别控制样式，完全不需要依赖:first-line：

/* 通用hover伪元素样式提取，减少重复代码 */
#cc-m-9319617175 .ccgalerie [id^="gallery_thumb_"]:hover:after,
#cc-m-9319617175 .ccgalerie [id^="gallery_thumb_"]:hover:before {
    position: absolute;
    display: block;
    width: 150px;
    margin-left: 0px;
    z-index: 9999;
    color: white;
    text-align: center;
    background-color: #333;
}

/* 姓名用after，设置加粗放大 */
#gallery_thumb_6016969275:hover:after {
    content:"SERENA";
    font-size: 18px;
    font-weight:bold;
    margin-top:-50px;
    padding-top: 4px;
}
#gallery_thumb_6016969375:hover:after {
    content: "Tim";
    font-size: 18px;
    font-weight:bold;
    margin-top:-50px;
    padding-top: 4px;
}
#gallery_thumb_6016969475:hover:after {
    content: "Kaspar";
    font-size: 18px;
    font-weight:bold;
    margin-top:-50px;
    padding-top: 4px;
}
#gallery_thumb_6016969575:hover:after {
    content: "Satrajit";
    font-size: 18px;
    font-weight:bold;
    margin-top:-50px;
    padding-top: 4px;
}

/* 职位用before，设置默认样式 */
#gallery_thumb_6016969275:hover:before,
#gallery_thumb_6016969375:hover:before,
#gallery_thumb_6016969475:hover:before,
#gallery_thumb_6016969575:hover:before {
    content: "Marketing";
    font-size: 14px;
    font-weight:normal;
    margin-top:-30px;
    padding-bottom: 4px;
}

这个方案不仅兼容性更好，还能减少重复代码，样式控制也更精准，不会受浏览器解析差异影响。

内容的提问来源于stack exchange，提问作者Reto Zollinger