覆盖CSS :before伪元素样式失效问题求助

1. 确认CSS加载顺序 #

你的自定义样式必须在hover.css之后引入，否则hover.css的默认样式会覆盖你的修改。比如HTML中标签的顺序要这样写：

<!-- 先引入hover.css -->
<link rel="stylesheet" href="hover.css">
<!-- 再引入你的自定义样式文件 -->
<link rel="stylesheet" href="your-style.css">

2. 补全伪元素必要属性 #

hover.css里的.hvr-sweep-to-bottom:before包含content、定位等核心属性，仅单独设置background会导致伪元素无法正常渲染。补全关键属性：

.hvr-sweep-to-bottom:before {
    content: ''; /* 伪元素必须声明content，否则不会显示 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}

3. 确保父元素定位正确 #

伪元素使用absolute定位时，父元素.hvr-sweep-to-bottom需要设置非静态定位，否则伪元素会基于整个文档定位，导致看不到预期效果：

.hvr-sweep-to-bottom {
    position: relative;
    overflow: hidden; /* 限制伪元素在父元素范围内，保证动画显示正常 */
}

4. 清除浏览器缓存 #

浏览器可能缓存了旧的CSS文件，强制刷新页面（Windows：Ctrl+Shift+R；Mac：Cmd+Shift+R），或者给CSS文件添加版本参数强制加载新资源：

<link rel="stylesheet" href="your-style.css?v=1.0">

5. 优先级临时测试 #

如果以上方法都无效，可临时用!important强制提升优先级（仅用于排查问题，不推荐长期使用）：

.hvr-sweep-to-bottom:before {
    background: rgba(0, 0, 0, 0.2) !important;
}

内容的提问来源于stack exchange，提问作者Jess Skidmore