原生 text-decoration 不支持渐变，需用 background-image 或 ::after 伪元素模拟；前者轻量兼容好，适用于单行；后者精准匹配文字宽度，适合导航菜单；多行需分 span 或 box-decoration-break。
原生 text-decoration: underline 不支持渐变，强行写 linear-gradient() 会被浏览器直接忽略。必须用视觉模拟方案，核心就两条路：background-image 或 ::after 伪元素。
用 background-image 模拟单行文字下划线
这是最轻量、兼容性最好的方式，适合标题、按钮、短链接等不换行场景。
-
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4)定义渐变，方向必须是水平（to right或90deg） -
background-size: 100% 1px—— 高度压到 1px，否则会铺满整行变成色块 -
background-position: bottom center或bottom 2px（数值按字体下沉量微调） -
background-repeat: no-repeat必须加，否则横向重复出多条线 - 文字容器要留出空间：
padding-bottom: 2px，否则下划线会被裁掉 - IE11 对
background-position: bottom center / 100% 1px解析不稳定，建议拆成独立属性并补单色降级
用 ::after 实现菜单项动态渐变下划线
导航菜单里文字长度不一，“首页”和“关于我们”宽度差很多，background-image 方案会撑满父容器，而 ::after 能精准匹配文字宽度。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 父元素（如
<a></a>）需设position: relative和display: inline-block -
::after必须有content: ""，且设为position: absolute、bottom: -2px - 宽度不能写
width: 100%，要用width: fit-content+left: 50%+transform: translateX(-50%)居中对齐 - 悬停动画别用
width过渡——fit-content不可过渡；改用scaleX(0)→scaleX(1)，配合transform-origin: left center - Firefox 旧版本对
fit-content支持弱，可加width: max-content双保险
多行文字的渐变下划线怎么处理
如果文字自动换行，background-image 会跨整行绘制一条长线，无法每行底部都贴合；::after 默认也不支持多行定位。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠方案：把每行文字包进独立
<span></span>，再对每个span应用background-image下划线 - 或者用
box-decoration-break: clone（Chrome/Firefox 支持，Safari 仅部分支持），让背景在断行处重置 - 避免用
mask-image截取边框——Safari 表现不稳，Firefox 不支持伪元素 mask - 注意
line-height和字体基线差异：不同字号下，bottom: -2px的偏移值得重新调，没有通用值
真正难的不是写出来，而是让这条线在不同字体、不同字号、不同缩放比例下都稳稳贴底不跳动。padding-bottom、background-position 垂直偏移、line-height 三者必须协同调整，靠一次配置通吃所有场景是不可能的。
