html - 悬停时锚动画的CSS问题
问题描述
我遇到了一个问题,如果锚链接中断成多行,我的 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)
解决方案
这是更新的小提琴:
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>
推荐阅读
- python - 在python中替换char beetween以引用的最佳方法
- c# - SciChart 中的不同点标记
- python - Keras2 ImageDataGenerator 或 TensorFlow tf.data?
- r - 如何在survminer(ggforest)中向森林图添加箭头
- c++ - 服务器可以接受来自另一个子网的连接吗?
- javascript - 如何将深层表单数据作为数组或对象发送?
- python - 使用 Databricks 将 Google Api 的结果写入数据湖
- c# - 我的 css 文件不适用于 xmlworkloader
- c# - 如何使用 C# 使表格中的文本在 PowerPoint 上具有轮廓?
- pytorch - 使用 2d 张量索引 3d 张量