温馨提示:本文翻译自stackoverflow.com,查看原文请点击:css - Multi-Line link animation on :before

css - 多线链接动画:在之前

发布于 2020-03-31 23:18:22

就像在问题中,我有一个代码

如何使这种效果在许多文本行上起作用,而不是现在那样-效果仅出现在2条文本行中的1条(例如示例)

:root {
--00a3a3: #00a3a3;
}

a {
position: relative;
text-decoration: none; /* For Example */
}

a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--00a3a3);
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);
}
<a href="#">test</a>
<br>
<br>
<a href="#">test
<br>
test2
</a>

查看更多

提问者
MAJO
被浏览
12
thingEvery 2020-02-01 18:13

摆脱困境::before相反,应用background-image<a>

:root {
--00a3a3: #00a3a3;
}

a {
position: relative;
text-decoration: none; /* For Example */
background-image: linear-gradient(#00a3a3, #00a3a3);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}

a:hover {
background-size: 100% 2px;
}
<a href="#">test</a>
<br>
<br>
<a href="#">test
<br>
test2
</a>

编辑: 问题是:before伪元素不知道您<a>是两行。它只是在其中添加一个新的块元素,并采用您给定的形状。

如果您知道链接将始终为两行,则可以:after在第二行中使用an来摆脱这种情况,如下所示:

:root {
  --00a3a3: #00a3a3;
}

a {
  position: relative;
  text-decoration: none;
  /* For Example */
}

a:before,
a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  background-color: var(--00a3a3);
  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:before {
  bottom: 0;
}

a:after {
  bottom: 1em;
}

a:hover:before,
a:hover:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
<a href="#">test</a>
<br>
<br>
<a href="#">test
<br>
test2
</a>

(但您最好重组代码以删除:before。)

发布
问题

分享
好友

手机
浏览

扫码手机浏览