Customized strikethrough on title - html

Question

I'm creating a website to school project and i want to put a strikethrough behind my title like in this image. I want that green lines behind text
I am working with HTML and CSS , someone know the code to get that beautiful strikethrough?

Answer 1

Short example including overlaying both strikes should be
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>
Using classes you can make overlays with different widths, etc. The basic idea is obvious.

Answer 2

This is an example , adjust as you wish, but you get the idea.
h2 {
font: 33px sans-serif;
margin-top: 30px;
text-align: center;
text-transform: uppercase;
color: red;
}
h2.background {
position: relative;
z-index: 1;
}
h2.background:before {
border-top: 2px solid #000;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 50%; left: 0; right: 0; bottom: 0;
width: 95%;
z-index: -1;
}
<h2 class="background">Random Title</h2>

Answer 3

I did it (Image example) but when i change resolution this happen: not responsive... How can i put it to be responsive? here is my HTML and here is my CSS... Thank you for all resolution but i'm using panther's example
#titulo1{
font-size: 5vw;
font-weight: 400;
color:#f5dc9f;
font-family: 'Moon Light' , sans-serif;
float: right;
margin-bottom: 0;
margin-top: 15vw;
margin-right: 15vw;
display: flex;
}
#titulo2{
color: #f5dc9f;
font-size:6.7vw;
font-family: 'Moon Bold', sans-serif;
clear: right;
float: right;
margin-top: 0;
margin-bottom: 0;
margin-right: 13vw;
}
#titulo3{
font-size: 4.8vw;
font-weight: 400;
color:#f5dc9f;
font-family: 'Moon Light' , sans-serif;
float: right;
margin-top: 0;
margin-right: 3vw;
}
#titulo2:before, #titulo2:after {
content: '';
background: rgba(0,0,255,0.3);;
border-radius: 40px;
position: absolute;
top: calc(53% - 1vw);
width: 50%;
height: 5%;
z-index: -1
}
#titulo2:before{
left: 54vw;
width: 15vw;
}
#titulo2:after{
right: 11vw;
width: 26vw;
}
#titulo1:before, #titulo1:after {
content: '';
background: rgba(0,0,255,0.3);;
border-radius: 40px;
position: absolute;
top: calc(40% - 20px);
width: 50%;
height: 5%;
z-index: -1
}
#titulo1:before{
left: 52vw;
width: 17vw;
height: 2vw;
}
#titulo1:after{
right: 15vw;
width: 20vw;
height: 2vw;
}
#titulo3:before, #titulo3:after {
content: '';
background: rgba(0,0,255,0.3);;
border-radius: 40px;
position: absolute;
top: calc(66% - 20px);
width: 50%;
height: 5%;
z-index: -1
}
#titulo3:before{
width: 3em;
height: 0.4em;
}
#titulo3:after{
right: 0.5em;
width: 9em;
height: 0.4em;
}
<h2 id="titulo1">Aqui vai ser</h2><br>
<h1 id="titulo2">o titulo</h1><br>
<h2 id="titulo3">do nosso trabalho!</h2><br>
here is the snippet but is very diferent from what i see on my browser