Search code examples
cssanimationstrikethrough

Custom strikethrough on hover with text that has two paragraphs

So I got this css strikethrough animation (on hover) but the problem is that I have text on two different lines and the strikethrough only animates on one of them (as you can see in the image). Is there a way to make the strikethrough go through both lines when its hovered?

Strikethrough

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;
  }
}
Solution

  • You need to use the pseudo-elements & associated code on both spans, then move the hover trigger to the parent so it activates on both children at the same time.

    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>