在不失去焦点的情况下为锚标记添加动画删除线

Question

我正在尝试创建一个动画，其中

line-through

悬停时将从左向右移动，但我无法实现它。因为

text-decoration

属性有一些限制。

所以我尝试使用像

::after

& 渐变这样的伪元素，但问题是我的锚标记堆叠在上面，如果我使用

z-index

来管理它，我会失去锚标记的焦点，并且无法单击在锚标签上

对于伪元素，它不适用于多行。

尝试使用

text-decoration

属性：

span {
  text-decoration: line-through !important;
  text-decoration-color: transparent !important;
  transition: text-decoration-color 1s;
}

span:hover {
  text-decoration: line-through !important;
  text-decoration-color: red !important;
}

<span><a href="#">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></span>

尝试使用渐变：

span {
  background: linear-gradient(red 0 0) no-repeat 0 60% / var(--s, 0%) .1em, #000;
  -webkit-background-clip: border-box, text;
  background-clip: border-box, text;
  color: #0000;
  transition: background-size .4s ease;
  font-size: 1.9em;
}

span:hover {
  --s: 100%;
}

<span><a href="#">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></span>

尝试使用伪元素：

.strikethrough-animation {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.strikethrough-animation::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px; /* Adjust thickness of the line */
  background-color: black; /* Adjust color of the line */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s ease; /* Adjust duration and timing function */
}

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

<span>
  <a class="strikethrough-animation"  href="#">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>
</span>

Answer 1

反过来 - 将

span

放入

a

中，然后您可以使用 z-index 获取链接背景后面的文本。不再有背景剪切，只是一个除了红色部分之外的所有部分都透明的渐变。

a {
  position: relative;
  z-index: 1;
  background: 
    linear-gradient(red 0 0) no-repeat 
    0 60% / var(--s,0%) .1em,
    #0000;
  color: #000;
  transition: background-size .4s ease;
  font-size: 1.9em;
}
a:hover {
  --s: 100%;
}
a span { position: relative; z-index:-1; }

<a href="#"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></a>