CSS动画在容器上而不是在链接上

Question

我有一个HTML链接上的CSS边框动画。动画设置在鼠标悬停时，它会自动调整到链接的位置。鼠标悬停后，边框动画成对出现，左右+自上而下。当动画结束时，边框将在链接周围形成一个正方形。

它工作得很好，直到链接得到一个换行，而不是一行，我有一个有两行的链接。在这种情况下，动画将围绕链接的顶部行形成，并忽略换行符。

我一直在尝试和尝试，我不能找出一种方法，使动画围绕整个链接，而不是只围绕第一个含义。有人能帮我吗?

代码笔:https://codepen.io/jo-o-figueiredo/pen/KKZOjWM

提前感谢!

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>

Answer 1

将.sparkle设置为显示块，以便它覆盖整个内容。
还要定义你的文本应该如何分割，因为如果它是一个长单词，默认情况下它没有选择超出边界。

.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>

Answer 2

我认为有很多事情需要指出:

解决方法:将display: block;添加到.sparkle类中，并增加max-width以使文本能够在一行中站立。

或者你也可以将动画样式应用到链接

周围的div中。可选:我认为您还可以删除链接周围的<p>元素，因为它不必要地使您的标记更复杂。