CSS animation on the container instead of on the link-CodePudding

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 >
  <div >
    <p>
      <a  href="#paket" rel="noopener">Sällskap - 
      Sammankomster</a>
    </p>
  </div>
</div>

CodePudding user response：

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 >
  <a  href="#paket" rel="noopener">Sällskap - 
      Sammankomster</a>
</div>

CodePudding user response：

I think there are multiple things to point out:

Easy Fix: Add display: block; to the .sparkle class and increase max-width to enable the text to stand in one line.

Alternatively you could also apply the animation styles to the divs surrounding the Link

Optional: I think you could also remove the <p> element surrounding the link as it is unnecessarily making your markup more complex.