Question

我遇到一个问题，如果锚链接断开多行，我的CSS动画将无法正常工作。

我创建了一个片段来展示我的问题。

body {
  background-color: #a3d5d3;
}

.max-width {
  width: 500px;
}

p {
  line-height: 24px;
}

a {
  position: relative;
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<h1>Hi,</h1>
<div class="max-width">
  <h3>The animation works when the anchor link is just on one line, but it's not working when it splits onto multiple lines. See both links in the paragraph below.</h3>
  <p>
    In <a href="https://twitter.com/jane_r?lang=en" target="_blank" rel="noopener">her own words</a>, she is a “digital marketing executive, bourbon lover, spinner, runner and reluctant hockey mom.” And she “<a href="https://www.linkedin.com/in/janericciardelli/"
      target="_blank" rel="noopener">possesses an entrepreneurial bent</a>, having co-founded Medium One, a leading digital agency, which was acquired by Mosaic Group in 2000”.</p>
</div>

我已经尝试过线的宽度和位置，但是无法正常工作。

有什么建议吗？

（Codepen https://codepen.io/jetweevers/pen/EreQaL）

Answer 1

这是更新的小提琴：

body {
  background-color: #a3d5d3;
}

.max-width {
  width: 500px;
}

p {
  line-height: 24px;
}

a {
  text-decoration: none;
  background-image: linear-gradient(black, black);
  background-position:bottom center;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .3s;
}

a:hover,
a:focus {
  background-size: 100% 2px;
}

<h1>Hi,</h1>
<div class="max-width">
  <h3>The animation works when the anchor link is just on one line, but it's not working when it splits onto multiple lines. See both links in the paragraph below.</h3>
  <p>
    In <a href="https://twitter.com/jane_r?lang=en" target="_blank" rel="noopener">her own words</a>, she is a “digital marketing executive, bourbon lover, spinner, runner and reluctant hockey mom.” And she “<a href="https://www.linkedin.com/in/janericciardelli/"
      target="_blank" rel="noopener">possesses an entrepreneurial bent</a>, having co-founded Medium One, a leading digital agency, which was acquired by Mosaic Group in 2000”.</p>
</div>

悬停时锚动画的CSS问题

1 个答案: