CSS animation on the container instead of on the link

April 28, 2022

I have a CSS border animation on an HTML link. The animation sets on mouse hover and it automatically adjusts to the with of the link. Once the mouse is hover, border animations appear in pairs, left-right + top-down. When the animation is over the borders will form a square around the link.

It works fine until the link gets a line break and instead of one line I have a link with two lines. In that case the animation will form around the top line in the link and ignore the line break.

I have been trying and trying and I cannot figure out a way to make the animation go around the whole link instead of only around the first meaning. Can anyone help me out?

Code Pen: https://codepen.io/jo-o-figueiredo/pen/KKZOjWM

Thanks in advance!

div.caixa {
  margin: 4em auto;
  padding: 4em;
  box-sizing: border-box;
  text-align: center;
}

.sparkle {
  max-width: 10em;
  color: #5a4d1a;
  margin: auto auto;
  font-size: 25px;
  line-height: 40px;
  text-decoration: underline;
  text-decoration-color: #b1d6b1;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 3px;
  font-weight: 500;
}

.sparkle:hover {
  cursor: pointer;
  text-decoration: none;
  color: #1a1a1a;
}

.u-hover--sparkle {
  box-sizing: border-box;
  position: relative;
  padding: 0.75em;
}

.u-hover--sparkle::before,
.u-hover--sparkle::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
  transition: transform .20s;
}

.u-hover--sparkle::before {
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  transform: scale3d(0, 1, 1);
}

.u-hover--sparkle::after {
  border-left: 1px solid #1a1a1a;
  border-right: 1px solid #1a1a1a;
  transform: scale3d(1, 0, 1);
}

.u-hover--sparkle:hover::before,
.u-hover--sparkle:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform .35s;
}

<div class="wpb_text_column wpb_content_element caixa">
  <div class="wpb_wrapper">
    <p>
      <a class="sparkle u-hover--sparkle" href="#paket" rel="noopener">Sällskap - 
      Sammankomster</a>
    </p>
  </div>
</div>

>Solution :

Set the .sparkle to display block so it covers the whole thing.
Also define how your text should break, because if it’s a long word, it has no choice to go out of bound by default.

.sparkle {
    display: block;
    word-break: break-all;
    /* rest of your code */
}

div.caixa {
  margin: 4em auto;
  padding: 4em;
  box-sizing: border-box;
  text-align: center;
}

.sparkle {
  max-width: 10em;
  color: #5a4d1a;
  margin: auto auto;
  font-size: 25px;
  line-height: 40px;
  text-decoration: underline;
  text-decoration-color: #b1d6b1;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 3px;
  font-weight: 500;
  
  display: block;
  word-break: break-word;
}

.sparkle:hover {
  cursor: pointer;
  text-decoration: none;
  color: #1a1a1a;
}

.u-hover--sparkle {
  box-sizing: border-box;
  position: relative;
  padding: 0.75em;
}

.u-hover--sparkle::before,
.u-hover--sparkle::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
  transition: transform .20s;
}

.u-hover--sparkle::before {
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  transform: scale3d(0, 1, 1);
}

.u-hover--sparkle::after {
  border-left: 1px solid #1a1a1a;
  border-right: 1px solid #1a1a1a;
  transform: scale3d(1, 0, 1);
}

.u-hover--sparkle:hover::before,
.u-hover--sparkle:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform .35s;
}

<div class="wpb_text_column wpb_content_element caixa">
  <a class="sparkle u-hover--sparkle" href="#paket" rel="noopener">Sällskap - 
      Sammankomster</a>
</div>