::before and ::after elements with title - html

Question

Trying to make bars go on the left and right of my <h2> title.
#s-text h2 {
font-size: 2.25em;
font-weight: 700;
color: black;
margin-bottom: 20px;
padding: 0;
}
#s-text h2:after {
content: "";
position: absolute;
display: inline-block;
right: 0;
height: 10px;
width: 30px;
background-color: red;
}
#s-text h2:before {
content: "";
position: absolute;
display: inline-block;
left: 0;
height: 10px;
width: 30px;
background-color: red;
}
<div id="s-text">
<h2>Title 1</h2>
</div>

Answer 1

Is this what you're looking for?
#s-text {
text-align: center;
}
#s-text h2 {
font-size: 2.25em;
font-weight: 700;
color: black;
position: relative;
margin-bottom: 20px; padding: 0;
display: inline-block;
}
#s-text h2:after {
right:-1em;
}
#s-text h2:before {
left:-1em;
}
#s-text h2:before,
#s-text h2:after {
content: "";
position: absolute;
display: inline-block;
height: 10px; width: 30px;
background-color: red;
top: 50%;
transform: translateY(-50%);
}
<div id="s-text">
<h2>what is it</h2>
</div>