在设计中，文字删除线（Strikethrough）是一种重要的视觉表达形式，常用于表示内容已被修订、价格变动或任务完成。本文将系统讲解 CSS 中实现文字删除线的多种方法、进阶技巧及最佳实践。

一、文字删除线：核心概念与应用场景

文字删除线是在文本中部绘制一条水平线的装饰效果，其主要应用场景包括：

  • 电商网站展示原价与折扣价（如 ~~¥599~~ 现价 ¥399）
  • 文档协作中显示被删除或修改的内容
  • 任务清单标记已完成项目
  • 表示过时或无效的信息

    • 二、基础实现：text-decoration 属性

    最直接的方式是使用 `text-decoration` 属性：

    css

    strikethrough {

    text-decoration: line-through;

    此属性是简写形式，实际包含多个子属性：

  • `text-decoration-line`：控制装饰线类型 (none|underline|overline|line-through)
  • `text-decoration-color`：设置装饰线颜色
  • `text-decoration-style`：定义线条样式 (solid|double|dotted|dashed|wavy)
  • `text-decoration-thickness`：控制线条粗细

    • 三、现代方案：text-decoration-line 精细控制

    CSS3 提供了更细粒度的控制：

    css

    precision-strike {

    text-decoration-line: line-through;

    text-decoration-color: ff6b6b;

    text-decoration-style: wavy;

    text-decoration-thickness: 2px;

    此代码创建一条2px粗的红色波浪形删除线

    > 关键优势：独立控制每条装饰线，可同时应用多种线型（如 `underline line-through`）

    四、伪元素方案：完全自定义删除线

    当需要完全控制删除线位置和样式时，伪元素是强大工具：

    css

    custom-strike {

    position: relative;

    display: inline-block;

    custom-strike::after {

    content: "";

    position: absolute;

    left: 0;

    top: 55%; / 精确控制垂直位置 /

    width: 100%;

    height: 3px;

    background: linear-gradient(to right, red, orange);

    transform: rotate(-5deg); / 创建倾斜效果 /

    opacity: 0.8;

    此方法优势：

    1. 实现渐变、动画等复杂效果

    2. 精确控制删除线与文本间距

    3. 创建非标准样式（如曲线、点阵）

    五、实用场景与样式增强技巧

    价格展示优化：

    css

    original-price {

    text-decoration: line-through;

    text-decoration-color: 999;

    position: relative;

    original-price::after {

    content: "";

    position: absolute;

    left: 5%;

    top: 52%;

    width: 90%;

    border-top: 2px solid ff4757;

    transform: skewY(-5deg);

    动态任务列表：

    css

    task-completed {

    transition: all 0.4s ease;

    task-completed:checked + label {

    text-decoration: line-through;

    color: a9a9a9;

    animation: strike-fade 0.5s forwards;

    @keyframes strike-fade {

    0% { text-decoration-color: transparent; }

    100% { text-decoration-color: 2ed573; }

    六、性能与兼容性深度优化

    1. 渲染性能对比：

  • `text-decoration`：浏览器原生支持，渲染效率最高
  • 伪元素方案：需额外图层合成，复杂动画可能影响性能

    • 2. 关键兼容性策略：

    css

    / 渐进增强方案 /

    strike-fallback {

    text-decoration: line-through; / 基础支持 /

    @supports (text-decoration-style: wavy) {

    strike-fallback {

    text-decoration-style: wavy;

    text-decoration-color: ff6b6b;

    3. 移动端适配要点：

  • 使用相对单位（em/rem）确保不同设备粗细一致
  • 触控区域增加：为删除线文本添加额外padding

    • 七、无障碍访问关键建议

    1. 语义化标记优先：

    html

  • 使用del元素增强语义 >

    • 售价：¥599 ¥399

    2. 色彩对比度要求：

  • 删除线颜色与文本需满足WCAG 2.1的4.5:1对比度
  • 深色模式适配示例：

    • css

    root {

    strike-color: ff6b6b;

    @media (prefers-color-scheme: dark) {

    root {

    strike-color: ff9e9e; / 浅色模式下更醒目的颜色 /

    八、前沿实践：文本装饰的未来趋势

    1. text-decoration-skip-ink：

    css

    ink-skipping {

    text-decoration: underline line-through;

    text-decoration-skip-ink: auto; / 避免删除线与字母笔画重叠 /

    2. CSS Houdini 自定义装饰：

    js

    CSS.paintWorklet.addModule('strike-worklet.js');

    css

    houdini-strike {

    text-decoration: line-through;

    strike-gradient: linear-gradient(45deg, ff9a9e, fad0c4);

    text-decoration-line: paint(customStrike);

    九、最佳实践

    1. 样式选择策略：

  • 基础需求 → 使用 `text-decoration: line-through`
  • 设计特殊效果 → 采用伪元素方案
  • 需要动画支持 → 结合 CSS transition 与 @keyframes

    • 2. 性能优化要点：

    css

    / 启用GPU加速 /

    animated-strike {

    will-change: text-decoration;

    transform: translateZ(0);

    / 限制重绘区域 /

    探索CSS文字删除线应用技巧

    strike-container {

    contain: style layout;

    3. 可维护性建议：

    scss

    // SCSS抽象删除线mixin

    @mixin strike($color: currentColor, $thickness: 1px, $offset: 0.45em) {

    position: relative;

    &::after {

    content: '';

    position: absolute;

    left: 0;

    top: $offset;

    width: 100%;

    height: $thickness;

    background: $color;

    discount-text {

    @include strike(e74c3c, 2px, 55%);

    删除线作为文本装饰的重要形式，其实现已经从简单的样式标记演变为具备精细控制能力的设计工具。掌握这些技术不仅能满足基础需求，更能创造出具有品牌特色的视觉表达形式。随着CSS新特性的不断发展，文本装饰能力将持续进化，为设计师开辟更广阔的创意空间。