动画CSS删除线文本装饰，具有多种文本颜色

Question

我指的是这个答案。如果有不止一种颜色需要删除线怎么办？

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.5em;
}

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> At vero eos et accusam et justo duo dolores et ea rebum.
</span>

Answer 1

经过评论区的讨论，这里是解决方案。

只需在文本上使用

position:relative

并放置

z-index:-999

，这样您的文本就会位于红线后面（删除线）。

工作示例：

span {
  background: 
    linear-gradient(to bottom, 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.5em;
 
  
}

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

a{
  position:relative;
  z-index:-999;
}

<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> At vero eos et accusam et justo duo dolores et ea rebum.
</span>

希望对您有帮助。

Answer 2

在此解决方案中，我将文本加倍，以便彩色链接可以位于

span

下方，并且可点击克隆透明地呈现在其顶部。因此，您会看到彩色删除线下方的彩色链接，但您仍然可以单击它。

span {
  background: 
    linear-gradient(90deg, red, orange, yellow, green, blue, magenta) no-repeat 
    0 60% / var(--s,0%) .1em,
    transparent;
  transition: background-size .4s ease;
  font: bold 2em serif;
}

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

span a {
  position: relative;
  z-index: -1;
}

span a.over {
  position: absolute;
  z-index: 1;
  color:transparent;
}

<span>
  <a href="#" class="over">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>
  <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> At vero eos et accusam et justo duo dolores et ea rebum.
</span>

这是通过

z-index

实现的，它让我们可以将元素放在其他元素之上或之下。所有内容都默认为零，因此我将彩色链接放在零下方，将可点击链接放在上方。

z-index

需要

position:relative

（将元素保留在原处）或

position:absolute

（使元素独立于其父元素，将其周围的元素渲染为不存在）。我选择“上方”副本为绝对副本，“下方”副本为相对副本，这并不重要，但一个必须是相对的（以保持流程正确），另一个必须是绝对的（不影响流程） ).

“over”链接的最后一行有点奇怪，它形成一个完整的矩形，而不是停在文本上。这意味着您可以单击“At vero”，就像它在链接中一样。如果您更改 a.over 的 CSS 以包含

background:#2222

，您可以更好地看到该问题。

我最初误读了您的请求，认为需要彩虹色来实现删除线效果，这就像更改

linear-gradient()

函数中的参数一样简单。挺好看的，所以就留着了您可以通过返回

linear-gradient(red 0 0)

来恢复它。

您还会注意到，我删除了一堆不必要的 CSS 提示（颜色和背景剪辑）。如果这破坏了东西，就把它们放回去。最后，我将字体增大并加粗，这样您就可以更清楚地看到上面的内容。