利用:hover触发状态变化，结合::before/::after创建视觉层，通过transition和transform实现平滑动画，如背景色渐变、滑入遮罩、上浮下划线等效果，关键在于伪元素content设置与定位上下文控制。
通过CSS伪类与伪元素制作悬停动画，可以实现视觉上更丰富且交互性强的效果。核心思路是利用 :hover 伪类触发状态变化，结合伪元素（如 ::before 或 ::after）创建额外的视觉层，再用 transition 或 transform 实现平滑动画。
使用 :hover 触发动画
:hover 是最常见的伪类之一，用于定义鼠标悬停时的样式。配合 transition 可以让属性变化更柔和。
示例：背景色渐变当用户将鼠标移到按钮上时，背景色从透明变为蓝色，过渡时间为0.3秒。
.button {
padding: 10px 20px;
background-color: transparent;
color: #333;
border: 2px solid #333;
transition: background-color 0.3s ease;
}
<p>.button:hover {
background-color: #007bff;
color: white;
}</p>用 ::before 或 ::after 制作遮罩或装饰效果
伪元素 ::before 和 ::after 能在元素前后插入内容，常用于添加图标、边框或遮罩层。结合定位和透明度控制，可做出滑入、浮现等动画。
示例：悬停时从左滑入背景条使用 ::after 创建一个隐藏的色块，悬停时向右展开。
.hover-slide::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background-color: #007bff;
transition: width 0.4s ease;
}
<p>.hover-slide:hover::after {
width: 100%;
}</p>注意： 父元素需设置 position: relative，确保伪元素定位正确。
结合 transform 实现位移动画
利用 transform 配合 opacity，可以让伪元素“飞入”或“淡入”，视觉冲击更强。
立即学习“前端免费学习笔记（深入）”；
示例：文字下方出现上浮下划线
.underline-effect {
position: relative;
display: inline-block;
padding: 8px 0;
}
<p>.underline-effect::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background-color: #007bff;
transform: translateX(-50%);
transition: width 0.3s ease;
}</p><p>.underline-effect:hover::before {
width: 100%;
}</p>增强版： 加入 Y 轴位移，让线条从下方“弹起”：
.underline-effect::before {
/* 其他样式 */
transform: translateX(-50%) translateY(2px);
opacity: 0;
}
<p>.underline-effect:hover::before {
width: 100%;
opacity: 1;
transform: translateX(-50%) translateY(0);
transition: all 0.3s ease;
}</p>基本上就这些。关键是理解 :hover 控制状态，伪元素扩展视觉表现，transition 和 transform 让动画自然。不复杂但容易忽略细节，比如伪元素默认不显示（需设 content），以及定位上下文的建立。
