CSS 容器上的动画而不是 link

Question

我在 HTML link 上有一个 CSS 边框动画。动画在鼠标悬停时设置，并自动调整为 link。一旦鼠标悬停，边框动画就会成对出现，从左到右 + 从上到下。当动画结束时，边界将在 link.

周围形成一个正方形

它工作正常，直到 link 换行，而不是一行，我有一个 link 两行。在这种情况下，动画将围绕 link 中的顶行形成并忽略换行符。

我一直在尝试，但我想不出一种方法让动画围绕整个 link 而不是只围绕第一个意思。谁能帮帮我？

码笔：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

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

轻松修复：将 display: block; 添加到 .sparkle class 并增加 max-width 以使文本能够排成一行。

或者，您也可以将动画样式应用于 Link

周围的 div

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

Answer 2

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

CSS 容器上的动画而不是 link

CSS animation on the container instead of on the link

html

css

css-animations