广州建设工程招标信息网搜索引擎优化是做什么的
用伪元素搞定文字填充动效：一行 JS 不写，效果炸裂
你是否曾经在设计页面标题时，觉得纯文字太寡淡？或者想做一个有动感的文字特效，但又不想引入 JS 甚至 SVG？
在这篇文章中，我们将通过 一段不到 20 行的 CSS，教你如何利用 ::before 和 hover，打造一个可以“从左向右填充的文字标题动画”。
它不仅无依赖、无 JS，还能在所有现代浏览器流畅运行，而且使用的技巧非常适合在你以后的项目中灵活复用。
🎯 最终效果预览
当你将鼠标悬停在下方文字上时，它会从半透明变为实心颜色，并从左向右填充：
#30diasdeCSS
👨🏫 一步步实现过程
✅ 第一步：写出基础 HTML 结构
我们先写一个最简单的 HTML 页面：
<!DOCTYPE html>
<html lang="pt-br"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>Efeito preenchimento</title></head><body><h1>#30diasdeCSS</h1></body>
</html>
✅ 第二步：让文字居中显示在页面中央
body {margin: 0;display: flex;align-items: center;justify-content: center;height: 100vh;font-family: sans-serif;
}
这段 CSS 使用了 flex 布局将页面内容垂直水平居中。
✅ 第三步：美化文字标题
h1 {margin: 0;padding: 0;font-family: verdana;font-size: 120px;color: rgba(255, 99, 71, 0.336); /* 半透明橘色 */text-transform: uppercase;position: relative;
}
position: relative是为了后续添加伪元素叠在文字上。
✅ 第四步：添加 ::before 伪元素实现填充动画的底层结构
h1::before {content: "#30diasdeCSS";position: absolute;top: 0;left: 0;color: tomato; /* 实心颜色 */width: 0%;overflow: hidden;transition: all 0.6s;
}
content保持文字一致；width: 0%+overflow: hidden让文字初始被隐藏；transition控制动画。
✅ 第五步：hover 时展开填充动画
h1:hover::before {width: 100%;
}
当鼠标悬停时，伪元素从 width: 0% 变成 100%，完成从左到右的填充效果。
🧠 技术原理解读
- 伪元素
::before：用来叠加同样的文字； - 定位 +
overflow: hidden：模拟从左到右的“滑入”遮罩； transition平滑动画：只需添加一次。
💡 延伸练习建议
- 改变颜色、字体、字号，自定义样式；
- 改为
::after实现反向动画； - 给文字添加渐变色背景（
background-clip: text）增强视觉感； - 鼠标悬停之外，还可以结合滚动触发效果。
✅ 总结
这个文字填充动效虽然简单，但蕴含多个 CSS 技巧，非常适合初中高级前端练手。
你可以快速把它集成到任何页面标题、副标题、按钮或品牌 Logo 上，让页面更有“高级感”。
下次我们会继续拆解更多 CSS 动效。欢迎点赞、收藏、转发支持！
☕ 支持作者
如果你觉得这篇文章对你有帮助，不妨请我喝杯咖啡吧！