CSS 删除线深度解析：从基础到高级定制

在 Web 设计中，删除线是一种常见的视觉元素，其用途广泛，从标记电商网站的“原价”，到表示任务列表中的“已完成”项，再到纯粹的装饰性设计效果。

实现删除线最直接的方式是使用text-decoration属性。

然而，这个经典属性虽然简单，但在颜色、粗细、位置乃至动画方面都存在一定的局限性。

删除线的实现方式与定制技巧

掌握删除线的关键在于了解不同实现方式的优缺点，并根据需求选择最合适的方案。

方式一：经典 text-decoration 属性族

这是添加文本装饰（如下划线、删除线）最标准、最直接的方法。现代 CSS 对其进行了功能扩展，使其不再只是一个简单的line-through。

• 基础：text-decoration-line 是核心属性，用于定义线的类型。

  css 复制代码

  .strike {
    text-decoration-line: line-through;
  }
   

• 颜色定制 (text-decoration-color)：您可以为删除线指定任意颜色，使其与文本颜色不同。

  css 复制代码

  .strike-red {
    text-decoration-line: line-through;
    text-decoration-color: red;
  }
   

• 样式定制 (text-decoration-style)：除了实线，还可以设置多种样式。

  • 可选值：solid (默认), double, dotted, dashed, wavy (波浪线)。
  css 复制代码

  .strike-wavy {
    text-decoration-line: line-through;
    text-decoration-style: wavy;
    text-decoration-color: orange;
  }
   

• 粗细定制 (text-decoration-thickness)：可以控制线的粗细。

  • 可选值：auto (默认), from-font，或具体的长度值（如2px, 0.1em）。
  css 复制代码

  .strike-thick {
    text-decoration-line: line-through;
    text-decoration-thickness: 3px;
  }
   

• 综合快捷属性：text-decoration 允许您在一行内设置所有相关属性，顺序为：line style color thickness。

  css 复制代码

  .strike-fancy {
    text-decoration: line-through wavy red 2px;
  }
   

• 局限性：

  1. 位置不可控：无法精确控制删除线在垂直方向上的位置（例如，让它更靠近文本底部或顶部）。
  2. 不支持渐变：text-decoration-color 只接受单一颜色值。
  3. 动画能力有限：虽然颜色和粗细支持过渡(transition)，但实现划线动画等效果非常困难或不可能。

方式二：现代且灵活的 background-image 方案

当text-decoration无法满足您的定制需求时，可以巧妙地利用背景渐变来“画”出一条删除线。这个方案提供了极高的自由度。

• 核心思想：我们不画线，而是创建一个非常细的、只有一种颜色的线性渐变 (linear-gradient) 作为背景图像，并精确控制其大小和位置。

• 实现步骤与代码示例：

  css 复制代码

  .strike-gradient {
    text-decoration: none; /* 确保没有默认的删除线 */
    background-image: linear-gradient(
      currentColor,
      currentColor
    ); /* 创建一个与文字颜色相同的渐变 */
    background-repeat: no-repeat;
    background-size: 100% 2px; /* 线的宽度为100%，粗细为2px */
    background-position: 0 50%; /* 水平位置从0开始，垂直位置居中 (50%) */
  }
   

  通过调整background-position的垂直值（如0 60%或center bottom），您可以精确控制删除线的位置。

• 优势：

  • 完全控制：可以完全控制线的颜色（包括渐变色）、粗细和垂直位置。
  • 强大的动画能力：由于是背景属性，它可以与transition完美配合，创建平滑的动画效果。

• 动画示例：实现一个从左到右划过文字的删除线动画。

  css 复制代码

  .strike-animated {
    /* 沿用上面的基础样式 */
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 50%;
    /* 初始状态下，线的宽度为0 */
    background-size: 0% 2px;
    transition: background-size 0.5s ease-in-out;
  }
   
  .strike-animated:hover {
    /* 鼠标悬停时，线的宽度变为100% */
    background-size: 100% 2px;
  }
   

方式三：语义化的 HTML 标签 <del> 和 <s>

删除线不仅是样式，有时它还承载着特定的语义。HTML 为此提供了两个专用标签。

• 背景：在标记文本时，应尽可能使用最符合其含义的 HTML 元素。
• <s> 标签：表示内容不再准确或相关 (Strikethrough)。常用于商品价格的“原价”。
  html 复制代码

  <p>这个苹果手机原价 <s>￥5999</s>，现价仅需 ￥2999！</p>
   

• <del> 标签：表示内容已经从文档中被删除 (Deleted Text)，语义更强。常用于文档修订记录。它可以附带cite（指向解释删除原因的 URL）和datetime（删除时间）属性。
  html 复制代码

  <p>
    会议时间定在<del datetime="2023-10-26T10:00Z">明天上午10点</del
    ><ins>后天下午3点</ins>。
  </p>
   

• 工作原理：浏览器默认会为<s>和<del>标签应用text-decoration: line-through;样式。
• 最佳实践：当删除线具有明确的“不再相关”或“已删除”的语义时，必须使用这两个 HTML 标签。然后，您可以通过 CSS 选择器（如del { ... }）为它们添加更丰富的视觉样式，无论是使用text-decoration属性族还是background-image方案。

最佳实践与可访问性 (A11Y)

• 可访问性 (Accessibility)：这是使用语义化标签最重要的原因。屏幕阅读器等辅助技术会识别<del>和<s>标签，并向用户传达“已删除”或“不再相关”的语义。如果仅用<span>配合纯 CSS 样式实现，这些信息对屏幕阅读器用户来说是不可见的。请确保信息传达不完全依赖于删除线这一视觉样式。
• 视觉清晰：无论使用哪种方法，都要保证删除线与文本本身、文本与页面背景之间有足够的色彩对比度，以方便所有用户阅读。
• 场景选择：
  • 简单装饰性：text-decoration足够好，简单快捷。
  • 高级定制或动画：background-image方案是首选。
  • 任何具有语义的场景：必须使用<del>或<s>标签，再根据需要用 CSS 美化。

CSS 删除线的实现远不止text-decoration: line-through那么简单。 text-decoration属性族提供了标准且不断增强的定制能力；background-image方案则为需要复杂样式和动画的场景打开了创造力的大门；而语义化的<del>和<s>标签提醒我们，代码不仅要看起来对，更要“读起来”对。

深刻理解这三者的应用场景与优劣，才能在开发中根据具体需求，做出最优雅且最具可访问性的技术选择。