css 在整个Div上创建删除线,而不是在其中创建文本

xxhby3vn  于 2023-06-07  发布在  其他
关注(0)|答案(2)|浏览(199)

我试图找到一种在文本上加删除线的方法,比如text-decoration属性,但是我试图让这一行穿过文本延伸到封装div的其余部分,而不仅仅是穿过文本本身。
我尝试过使用text-decoration属性、调整text对象的宽度等等,但没有找到任何有效的方法。

3yhwsihp

3yhwsihp1#

你可以使用像::after这样的伪元素来实现这一点,容器的位置应该设置为relative,伪元素的位置应该设置为absolute,以便它可以定位自己。

#container {
    position: relative;
  }

#container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  background: red;
}
<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>
g6ll5ycj

g6ll5ycj2#

您可以使用渐变来模拟此效果:

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>

相关问题