带有两个段落的文本悬停时的自定义删除线

Question

所以我得到了这个 css 删除线动画（悬停时），但问题是我在两行不同的行上有文本，而删除线仅在其中一行上显示动画（如图所示） .有没有办法让删除线在悬停时穿过两条线？

html

<a href="designer.html"><h1 class="option"><span>The</span><br><span>Designer</span></h1></a>

css

.options{
  margin-top: 100px;
  .option {
    span {
      cursor: pointer;
      position: relative;
      .strikethrough;
    }
  }
}

.strikethrough {
  &::after, &::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 5px;
    top: 50%;
    margin-top: -0.5px;
    background: @accent_color;
  }

  &::before {
    left: -2.5px;
  }

  &::after {
    right: 2.5px;
    background: @accent_color;
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  &:hover:before {
    background: @accent_color;
    width: 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  &:hover:after {
    background: transparent;
    width: 100%;
    transition: 0s;
  }
}

Answer 1

您需要在两个 span 上使用伪元素和关联代码，然后将悬停触发器移动到父级，以便它同时在两个子级上激活。

a {
  text-decoration: none;
}
.option span {
  position: relative;
  display: inline-block;
}
.option span::after,
.option span::before {
  content: '';
  position: absolute;
  width: 0%;
  height: 5px;
  top: 50%;
  margin-top: -0.5px;
  background: red;
}
.option span::before {
  left: -2.5px;
}
.option span::after {
  right: 2.5px;
  background: red;
  -webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.option:hover span:before {
  background: red;
  width: 100%;
  -webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.option:hover span:after {
  background: transparent;
  width: 100%;
  -webkit-transition: 0s;
  transition: 0s;
}

<a href="designer.html"><h1 class="option"><span>The</span><br><span>Designer</span></h1></a>

带有两个段落的文本悬停时的自定义删除线

Custom strikethrough on hover with text that has two paragraphs

css

animation

strikethrough