Create a Strikethrough on Entire Div, Rather than Text Within

Question

I am trying to find a way to have a strikethrough over text, such as the one possible with the text-decoration property, however I'm trying to make the line extend past the text to the rest of the encapsulating div, rather than just through the text itself.

I have tried using the text-decoration property, adjusting the width of the text object, and so on, but haven't found anything that works.

Answer 1

You can use a pseudoelement like ::after to achieve that, the container's position should be set to relative, and the position of the pseudoelement should be set to absolute so that it can position itself.

#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>

Answer 2

You can simulate this with a gradient:

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>

If lh is not well supported you can manually set the line height:

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>