我有一个包含伪元素控制下划线的文本元素。我想要实现的是,当该元素占据两行或更多行时,下划线应该与元素宽度相同,但现在它只占据了最后一行的宽度(见截图)。
这样做的问题在于,悬停状态下的行宽度没有填满第一行的宽度。
第二种尝试使用
我想要实现的结果是这样的:
我已经上传了一个 jsfiddle 来展示我的意思: https://jsfiddle.net/m6rmxuoy/1/
这里有两个例子: 一个是使用 display: inline
属性的 h2
元素:
.wrapper {
width: 260px;
h2 {
position: relative;
display: inline;
background-color: yellow;
&:after {
position: absolute;
left: 0;
bottom: 0;
width: 80px;
height: 3px;
background-color: #0077bc;
content: '';
}
&:hover:after {
width: 100%;
}
}
}
这样做的问题在于,悬停状态下的行宽度没有填满第一行的宽度。
第二种尝试使用
display: inline-block
,会适应包装器的宽度,而不是像display: inline
那样停留在最长的行处。.wrapper2 {
width: 260px;
h2 {
position: relative;
display: inline-block;
background-color: yellow;
&:after {
position: absolute;
left: 0;
bottom: 0;
width: 80px;
height: 3px;
background-color: #0077bc;
content: '';
}
&:hover:after {
width: 100%;
}
}
}
我想要实现的结果是这样的:
我已经谷歌搜索了相当长的时间,甚至找到了box-decoration-break: clone;
,但它并不能帮助我处理伪元素。
有什么想法吗?