伪元素::after必须配合content属性才能生效，否则不渲染；父元素需设position: relative以确保准确定位；动画推荐用transform: scaleX()提升性能。
伪元素::after必须配合content才能生效
很多人写完::after发现什么都没显示，根本原因是没加content: ""。CSS规范强制要求：所有伪元素（包括::before和::after）若要渲染，content属性不可省略，哪怕只是空字符串。
常见错误写法：a::after { width: 100%; height: 2px; background: #007bff; } —— 这段代码完全不会显示任何内容。
正确基础结构：
a {
position: relative;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
父元素必须设position: relative才能让::after准确定位
::after默认是相对于最近的**已定位祖先元素**（即position值为relative、absolute或fixed）进行绝对定位。如果父元素没设定位，::after可能相对<body>偏移，导致下划线错位甚至跑出可视区。
立即学习“前端免费学习笔记（深入）”；
务必检查并确保链接本身（如a）设置了position: relative，这是实现精准贴底控制的前提。
- 不加
position: relative→bottom: 0可能失效或定位到页面底部 - 若父容器已有其他定位需求（如
position: absolute），需确认层级关系是否干扰 - 避免在
display: inline元素上直接用height控制::after——它默认也是display: inline，高度可能被忽略；建议显式设display: block或保持inline-block
动画平滑的关键在于transition作用于可动画属性
下划线伸缩效果本质是宽度变化，所以transition必须写在::after上，并且只对width（或transform: scaleX()）生效。不要试图对left/right做过渡——那会引发重排，性能差且难控制起点。
推荐两种稳定方案：
-
用
width+overflow: hidden（父元素）：简单直接，兼容性好（IE9+） -
用
transform: scaleX(0)→scaleX(1)：更优性能（GPU加速），但需注意transform-origin: left center保证从左向右展开
示例（transform版）：
a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
}
响应式或字体变化时，bottom值可能需要微调
下划线紧贴文字基线，靠的是bottom: 0。但不同字体、line-height、font-size甚至vertical-align都会影响实际距离。尤其在移动端或使用自定义字体时，常出现下划线“悬空”或“压字”的情况。
调试建议：
- 先用
bottom: -2px或bottom: -1px尝试微调（负值更常见） - 避免固定
height过大（如超过2px），否则在小字号下显得突兀 - 若链接内含
vertical-align: middle等设置，::after的bottom可能需结合transform: translateY()补偿
真正麻烦的不是写法，而是不同字体渲染差异带来的像素级偏移——这点容易被忽略，直到上线后在iOS Safari或Windows Chrome里才暴露出来。
