css - 跨多行的伪元素创建连续的下划线动画
问题描述
我在链接下有一条动画线。它适用于单行链接,但我有一些用换行符分隔的链接<br>
有没有办法让动画下划线沿着链接的所有行出现?谢谢
body {
padding: 20px;
font-family: Helvetica;
}
a {
font-weight: bold;
color: black;
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
width: 0%;
height: 2px;
bottom: 0;
background-color: #000;
transition: all 0.2s;
}
a:hover::before {
width: 100%;
}
<a href="">my link</a>
<br><br>
<a href="">this is<br>a much<br>longer link</a>
解决方案
使用如下渐变:
body {
padding: 20px;
font-family: Helvetica;
}
a {
font-weight: bold;
color: black;
position: relative;
text-decoration: none;
background:linear-gradient(#000,#000) left bottom no-repeat;
background-size:0% 2px;
transition: all 0.5s;
}
a:hover {
background-size:100% 2px;
}
/* this will give another kind of animation (all lines will animate at the same time)*/
.alt {
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
<a href="">my link</a>
<br><br>
<a href="">this is<br>a much<br>longer link</a>
<br><br>
<a class="alt" href="">this is<br>a much<br>longer link</a>
有关的:
推荐阅读
- ios - kukushi/SideMenu 显示菜单无法从另一个视图控制器中工作
- vlfeat - 设置 VGG 的 VL_PHOW 的金字塔等级
- jsr352 - jBeret + Weld SE - 从 Batchlet 注入托管 bean
- sql - 在 sql 中使用 LAG 跳过特定行
- ignite - 如果它是我自己的类型,Apache Ignite 会根据远程服务代理方法返回一个代理吗?
- php - 是否可以通过循环来优化PDO中的大量BindValue?
- php - 有没有办法从 mssql 增量导出到 mysql?
- hash - Apple Homekit 设置哈希
- symfony - Symfony 5 - 错误:服务“uri_signer”依赖于不存在的参数“kernel.secret”。您的意思是:“kernel.charset”吗?
- python - 根据第一个条目从数组中删除重复项