HTML 里还在硬用 <s> 标签画删除线？试试这几套更灵活的方案

维护旧项目时，总能在代码里瞥见 <s> 甚至早已过时的 <strike> 标签。它们确实能实现删除线效果，浏览器也默认兼容，可一旦遇到实际业务中的复杂需求，这些“老古董”立马露馅。比如运营突然要求把黑色删除线改成红色，或者需要调整线条粗细来匹配特定的 UI 风格，这时候直接操作原生标签属性往往会力不从心。与其在旧的语法里修修补补，不如换成更符合现代标准的技术栈。

CSS 样式控制才是主流

想要彻底摆脱标签的限制，最直接的办法是把表现层交给 CSS。text-decoration 系列属性完全足够应对绝大多数场景。通过设置 text-decoration-line: line-through，你可以轻松实现标准的删除线，而无需依赖特定标签包裹。

更重要的是，CSS 赋予了独立控制样式的权力。原生 <s> 标签生成的删除线通常只能继承文本颜色，这在视觉上容易混淆信息层级。利用 text-decoration-color 属性，你可以将删除线设为灰色、红色甚至是半透明色，让重要信息的弱化更加自然。同时，结合 text-decoration-thickness，还能精确调整线条的视觉重量，确保在不同分辨率屏幕上显示效果一致。这一点在处理高保真还原设计稿时尤为关键，因为设计师的像素级要求往往无法靠默认标签满足。

语义化比样式更重要

很多时候我们纠结于删除线的画法，却忽略了它背后的业务含义。如果这段文字代表商品降价后的原价，使用 <del> 标签可能比单纯的样式更具语义价值；如果是表示一段不再推荐的旧版本说明，<s> 在语义上更为贴切。

别小看这个选择，它对无障碍访问和 SEO 有直接影响。屏幕阅读器读到 <del> 时会明确告知用户这部分内容已被移除，而在搜索引擎眼里，带有正确语义标签的内容更容易被理解上下文关系。在实际开发中，优先确保 HTML 结构的语义准确，再叠加 CSS 样式，这比单纯追求视觉效果更有长期价值。 这种写法也方便后续维护，其他同事看到标签名就能立刻明白这段数据的用途，降低了沟通成本。

特殊场景下的灵活变通

当然，总有例外情况。当设计要求不再是简单的横线，而是波浪线、虚线，或者是模拟真实笔迹的手写删除效果时，上述方法就可能失效。

遇到这种需求，利用 CSS 伪元素是一个聪明的折中方案。例如给文字添加一个 ::after 伪元素，通过 content: '' 配合 border-bottom 来绘制自定义样式的线条。这种方式完全脱离了浏览器对删除线渲染的内核逻辑，让你拥有无限的自定义空间。如果是极复杂的图形删除效果，甚至可以考虑使用 SVG 覆盖在文字上层。虽然实现成本稍高，但在品牌强视觉要求的页面中，这种定制化的呈现方式能有效提升页面的精致度。

归根结底，技术选型要看场景。如果是简单展示，直接用 CSS 控制即可；如果需要传达明确的“作废”信号，回归语义化标签；若是追求独特视觉体验，则需引入伪元素或图形方案。别让 <s> 标签成为习惯性的惰性选择，根据实际需求匹配最合适的工具，代码才能经得起时间的考验。