<div id="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium modi distinctio quidem explicabo dolorum est exercitationem, sapiente reiciendis eveniet vitae vel id voluptatibus, ea quod maiores officia itaque, aliquam doloribus!
</div>
p {
font-size: 20px;
background:
linear-gradient(currentColor 2px,#0000 0)
0 .5lh/ /* position: 0 and 1/2 line height */
100% 1lh; /* width:100% height: 1 line height*/
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget congue quam. Nam rhoncus consectetur ligula, ut congue eros malesuada sit amet. Sed mauris metus, venenatis sit amet pellentesque sed, fringilla et lectus. Nunc ultrices fringilla turpis, eu efficitur tortor imperdiet id. Sed elementum dignissim lacus, ut auctor mi finibus sit amet. Praesent fermentum feugiat erat quis consequat. Nam dictum sagittis odio at mattis. Donec at interdum elit, sit amet varius turpis. Curabitur iaculis vitae dui ut fringilla. Sed consequat velit id facilisis efficitur. Aenean ipsum urna</p>
如果lh不受支持,您可以手动设置行高:
p {
font-size: 20px;
line-height: 1.2em;
background:
linear-gradient(currentColor 2px,#0000 0)
0 .6em/ /* position: 0 and 1/2 line height */
100% 1.2em; /* width:100% height: 1 line height*/
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget congue quam. Nam rhoncus consectetur ligula, ut congue eros malesuada sit amet. Sed mauris metus, venenatis sit amet pellentesque sed, fringilla et lectus. Nunc ultrices fringilla turpis, eu efficitur tortor imperdiet id. Sed elementum dignissim lacus, ut auctor mi finibus sit amet. Praesent fermentum feugiat erat quis consequat. Nam dictum sagittis odio at mattis. Donec at interdum elit, sit amet varius turpis. Curabitur iaculis vitae dui ut fringilla. Sed consequat velit id facilisis efficitur. Aenean ipsum urna</p>
2条答案
按热度按时间3yhwsihp1#
你可以使用像
::after
这样的伪元素来实现这一点,容器的位置应该设置为relative
,伪元素的位置应该设置为absolute
,以便它可以定位自己。g6ll5ycj2#
您可以使用渐变来模拟此效果:
如果
lh
不受支持,您可以手动设置行高: