为锚点标签实现不丢失焦点的line-through动画

问题梳理 #

要做鼠标悬停时删除线从左到右展开的动画，但现有尝试遇到三个核心问题：

• text-decoration 属性仅能修改颜色，无法实现宽度展开的动画效果
• 渐变方案会遮挡锚点链接，调整 z-index 又会导致链接失去可点击性
• 伪元素方案只能适配单行文本，多行场景下删除线会变成贯穿整个元素的单条直线，不符合需求

可行解决方案 #

以下两种方案均支持多行文本、不遮挡链接点击，且能实现从左到右的展开动画：

方案1：背景渐变实现（推荐） #

利用背景渐变模拟删除线，通过过渡动画控制渐变宽度，自动适配多行文本：

.strikethrough-hover {
  /* 初始状态：渐变宽度为0，不显示删除线 */
  background: linear-gradient(currentColor 0 0) no-repeat left 50% / 0% 2px;
  transition: background-size 0.4s ease;
  text-decoration: none;
  color: inherit;
}

.strikethrough-hover:hover {
  /* 悬停时渐变宽度拉满，显示完整删除线 */
  background-size: 100% 2px;
}

<!-- 多行文本示例，可直接设置宽度触发换行 -->
<a href="#" class="strikethrough-hover" style="display: inline-block; width: 220px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</a>

优势：

• 自动适配多行文本，每一行都会生成对应的删除线
• 背景渐变不会拦截点击事件，链接保持正常可交互性
• 用 currentColor 继承文本颜色，无需单独指定删除线颜色

方案2：伪元素 + 指针事件控制（单行/多行通用） #

如果偏好伪元素实现，可通过 pointer-events: none 让伪元素不拦截点击，同时适配多行文本：

.strikethrough-pseudo {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: inline;
}

.strikethrough-pseudo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
  /* 关键：让伪元素不接收点击，保证链接可点 */
  pointer-events: none;
}

.strikethrough-pseudo:hover::after {
  transform: scaleX(1);
}

<a href="#" class="strikethrough-pseudo" style="display: inline-block; width: 220px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</a>

说明：

• pointer-events: none 是核心，避免伪元素覆盖链接导致无法点击
• 伪元素相对链接定位，会跟随文本换行自动调整位置，适配多行场景

对之前尝试的问题解析 #

1. text-decoration方案：该属性仅支持颜色、粗细等属性的过渡，无法对删除线的宽度/覆盖范围做动画，因此无法实现从左到右的展开效果。
2. 渐变方案：你使用了 background-clip: text 并将文本设为透明，这会让渐变层覆盖在文本上方，导致链接的点击区域被遮挡；若调整 z-index 让链接在顶层，又会让渐变被隐藏，陷入两难。
3. 伪元素方案：之前的代码将容器设为 inline-block，伪元素是绝对定位的块级元素，因此只会生成一条贯穿整个容器的直线，无法适配多行文本的换行需求。

内容的提问来源于stack exchange，提问作者mr.Hritik