Applying pseudo class "before" and "after" to multi-line text - html

Question

I am trying to add a pseudo before and after vertical line to a textfield for styling purposes. These elements need to be flush to the text -20px left and -20px right.
This works fine when the text is on one line as an inline-block, but as soon as the text spans multiple lines the width expands to that of the parent and the pseudo elements are no longer just 20px from the text.
Is there a way in which I can accomplish this using CSS?
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2 {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-color: blue;
color: white;
}
span {
position: relative;
background-color: green;
}
h2::before,
h2::after {
content: '';
position: absolute;
top: 0;
width: 4px;
height: 20px;
background: black;
}
h2::before {
left: -20px;
}
h2::after {
right: -20px;
}
<!-- Single line example works as the black bars are 20px away from the start/end of text-->
<div class="container">
<h2><span>This is a title</span></h2>
</div>
<br> <br>
<!-- double line doesn't work because the h2 is now the full width of the container -->
<div class="container">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
Edit: Here is a working version using tables, but if anyone has a better solution I'd love to hear it: https://codepen.io/anon/pen/MqveLQ

Answer 1

So from what i can see is the issue here is where you are applying the borders with before and after. You need to alter where you apply your borders. Remove them from the h2, and add in a new html element that wraps the h2 and apply there.
eg:
<div class="container">
<div class="headerwrap">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
</div>
<div class="container">
<div class="headerwrap">
<h2><span>This is a title</span></h2>
</div>
</div>
CSS
.headerwrap::before,
.headerwrap::after {
content: '';
position: absolute;
top: 0px;
bottom:0;
margin:auto;
width: 4px;
height: 20px;
background: black;
}
.headerwrap::before {
left: 10px;
}
.headerwrap::after {
right: 10px;
}
Here is a working example: https://codepen.io/FEARtheMoose/pen/VGbJjO?editors=1100#0
Edit: altered example after comments - https://codepen.io/FEARtheMoose/pen/VGbJjO

Answer 2

I have moved your code to this fiddle: https://jsfiddle.net/n2Lr6xy5/13/ and removed position: absolute along with stripping out some of the other styles as they seemed unnecessary and I think I have created what you're after.
Here is the updated CSS:
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2{
display: inline-block;
}
h2:after,
h2:before {
content: "";
width: 4px;
height: 20px;
background: #000000;
display: inline-block;
margin: 0 10px;
}