css - 必要时使 :before 内容换行到下一行
问题描述
我正在对我的锚标签进行样式化,并且正在使用 :before 伪类。问题是如果链接换行到下一行, :hover 效果下划线内容不会换行到下一行。关于如何实现这一点的任何建议?谢谢。
CSS:
a {
background: #da1207;
background: -webkit-linear-gradient(to right, #da1207 0%, #e89705 100%);
background: -moz-linear-gradient(to right, #da1207 0%, #e89705 100%);
background: linear-gradient(to right, #da1207 0%, #e89705 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
padding: 0;
border: 0 none;
position: relative;
outline: none;
a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: rgb(217, 7, 7);
background: linear-gradient(
90deg,
rgba(217, 7, 7, 1) 0%,
rgba(248, 229, 143, 0.9135855025603992) 100%
);
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: 0.25s linear;
}
a:hover:before,
a:focus:before {
visibility: visible;
transform: scaleX(1);
}
解决方案
您可以使用嵌套内联元素的背景来解决此问题,但您将没有边框半径:
a {
background:
linear-gradient(90deg, rgba(217, 7, 7, 1), rgba(248, 229, 143, 1))
bottom left/0% 3px no-repeat;
padding-bottom:3px;
line-height:1.4em;
transition: 0.25s linear;
text-decoration:none;
}
a span {
background: #da1207;
background: linear-gradient(to right, #da1207 0%, #e89705 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a:hover {
background-size: 100% 3px;
}
<a href=""><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque nec eros vitae viverra. Nunc ut dui eget ligula egestas consequat non sed magna. E</span></a>
推荐阅读
- flutter - Flutter中具有最小高度的扩展小部件
- c# - 从另一个类 c# 调用方法
- date - 使用 Freemarker 为 GeoServer GetFeatureInfo 格式化日期的问题
- sql - 检索每组中的三个最高值
- flutter - How do i get a loading screen while i fetch images from api?
- postgresql - bakup postgresql 数据库的推荐方法是什么:pg_dump VS pg_basebackup?
- html - 无法在离子选择标题中添加图标
- angular - 创建共享库并在本地使用(angular + typescript + webpack)
- java - 我可以重复使用 Checkstyle 格式吗?
- windows - 鼠标中键无法在浏览器中打开或关闭选项卡