可以，text-decoration 支持空格分隔多值如 underline line-through；现代写法用 text-decoration-line 等分离属性实现颜色、粗细、偏移的独立控制。
text-decoration 能同时设置下划线和删除线吗
可以，但不是靠多次写 text-decoration，而是用空格分隔多个值。CSS 规范允许在单个 text-decoration 声明中组合使用 underline、line-through、overline 等修饰类型。
- 错误写法：
text-decoration: underline; text-decoration: line-through;—— 后者会完全覆盖前者 - 正确写法：
text-decoration: underline line-through; - 顺序无关紧要，
line-through underline效果相同 - 注意：IE 11 及更早版本不支持多值写法，只认第一个值（如只显示下划线）
text-decoration-line 是更现代的写法吗
是的。text-decoration-line 是 CSS Text Decoration Level 3 引入的独立属性，专门控制“画哪条线”，和 text-decoration-color、text-decoration-style 解耦。它解决了老式 text-decoration 一锅炖带来的可维护性问题。
- 兼容性：Chrome 57+、Firefox 36+、Safari 12.1+、Edge 79+ 支持；IE 完全不支持
- 等效写法：
text-decoration-line: underline line-through; - 优势：能单独改颜色或样式而不影响其他线型，比如：
text-decoration-line: underline line-through;<br>text-decoration-color: red;<br>text-decoration-style: wavy;
- 如果只设
text-decoration-line，其他装饰属性（颜色、粗细、偏移）仍沿用默认值
为什么加了 text-decoration 还看不到删除线
常见原因不是语法错，而是被其他样式覆盖或渲染逻辑干扰。重点排查以下几点：
- 父元素设置了
text-decoration: none;，且未在子元素中显式重置（text-decoration不继承，但会受层叠影响） - 元素是
inline元素（如<span>），但内部包含块级内容（如<div>），此时部分浏览器可能忽略装饰线 - 使用了
transform: scale()或font-size: 0;等导致视觉上“线不可见”的操作 - CSS 优先级冲突：检查是否被更高权重的选择器（如 ID 或
!important）覆盖
如何让下划线离文字远一点或换颜色
老式 text-decoration 无法单独调位置或颜色；必须升级到 Level 3 的拆分属性，或用 border-bottom 模拟。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案（现代浏览器）：
text-decoration-line: underline;<br>text-decoration-color: #007bff;<br>text-decoration-thickness: 2px;<br>text-decoration-offset: 4px;
-
text-decoration-offset控制距离，默认是浏览器自动计算，设为4px或0.2em更可控 - 降级方案（兼容旧浏览器）：用
border-bottom+padding-bottom模拟，但无法实现真正的“删除线”语义 - 注意：
text-decoration-thickness在 Firefox 中需启用layout.css.text-decorations.level-3.enabled标志（v91+ 默认开启）
text-decoration 多值写法足够应付多数下划线+删除线需求；但一旦涉及定制颜色、间距或动画，就得切到 text-decoration-line + text-decoration-offset 组合——别忘了查 Can I Use 上的兼容表，尤其当目标用户还在用旧版 Edge 或 Safari 时。 
