html - 标题上的自定义删除线

Question

我正在为学校元素创建一个网站，我想在我的标题后面加上删除线，就像这张图片中那样。 I want that green lines behind text

我正在使用 HTML 和 CSS，有人知道获得漂亮删除线的代码吗？

Answer 1

包括叠加两个罢工的简短示例应该是

p {font-size: 130px; color: #f00;}
span {position: relative;}
span:before, span:after {content: ''; background: rgba(0,0,0,.5); border-radius: 20px; position: absolute; top: calc(50% - 20px); width: 56%; height: 40px; z-index: -1}
span:before {left: 0;}
span:after {right: 0;}

span.left:before {width: 100%;}
span.left:after {width: 100px; left: 0;}

span.longer:before {width: 60%; left: 8%}
span.longer:after {width: 43%; left: 47%;}

<p>
    <span>TEXT</span> <br>
    <span>WITH</span> <br>
    <span>STRIKE</span><br>
    <span class="left">LEFT</span>
    <span class="longer">OTHER</span>
</p>

使用类，您可以制作具有不同宽度的叠加层等。基本思想很明显。