可用::before伪元素配合transform:scale()与过渡动画实现链接hover时背景“轻微扩散”效果：通过相对定位、绝对定位伪元素，初始小缩放+大圆角，hover时放大并减小圆角，配合inset和transform-origin优化适配性。
可以用 ::before 伪元素配合 transform: scale() 和过渡动画，实现链接 hover 时背景“轻微扩散”的视觉效果——本质是让一个覆盖在文字下方的圆形或矩形背景，从中心点平滑放大。
1. 基础结构：定位伪元素并遮盖文字
确保链接为相对定位（position: relative），这样 ::before 才能准确覆盖在其下方；伪元素默认设为绝对定位、透明背景、z-index 低于文字（避免遮挡）。
- 给
a加position: relative; display: inline-block;（行内元素需块化才能撑开伪元素） -
::before设content: ""、position: absolute、top: 0; left: 0; width: 100%; height: 100% - 用
background-color设背景色，z-index: -1确保它在文字底下
2. 实现“扩散感”：从中心缩放 + 圆角过渡
关键不是单纯放大，而是让背景看起来像从文字中心“晕开”。做法是：初始 scale 设小（如 0.8），圆角设大（如 50% 变成圆形），hover 时 scale 到 1.2～1.4，并减小圆角（如 8px）增强铺展感。
- 初始状态：
transform: scale(0.8); border-radius: 50%; - hover 状态：
transform: scale(1.3); border-radius: 6px; - 加
transition: transform 0.3s ease, border-radius 0.3s ease;
3. 优化细节：避免跳动与适配多行
如果链接换行或高度不固定，直接 100% 宽高会拉伸变形。建议：
立即学习“前端免费学习笔记（深入）”；
- 用
inset: 0替代top/left/width/height，更健壮 - 加
transform-origin: center center明确缩放中心 - 若文字有 padding，伪元素可略外扩（如
inset: -4px），让扩散更饱满
4. 完整示例代码
CSS：
a {
position: relative;
display: inline-block;
padding: 8px 16px;
color: #333;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
inset: 0;
background: #e0f7fa;
border-radius: 50%;
z-index: -1;
transform: scale(0.75);
transform-origin: center center;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
border-radius 0.35s ease;
}
a:hover::before {
transform: scale(1.35);
border-radius: 6px;
}
其中 cubic-bezier(0.34, 1.56, 0.64, 1) 是轻微“先快后缓再回弹”的弹性节奏，比纯 ease 更有扩散的呼吸感。
基本上就这些——不用 JS，纯 CSS，轻量又可控。核心就是控制好伪元素的起始尺寸、缩放原点、圆角变化和缓动曲线。
