css pseudo code with one before to recreate the featured mockup - css

Question

I was tasked with a challenge by a developer to receate this comp with one :before pseudo element and found it outside of my relm of experience, I didn't end up solving the problem but as stated I did manage to recreate the comp with two pseudo element on one selector. Here is a jsfiddle example. http://jsfiddle.net/rt9nbg8j/
body{
width:100%;
margin: 0 auto;
}
h1:before{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:left;
margin-right:20px;
background:#fff;
}
h1{
height:60px;
display: block;
float:left;
text-align:center;
background:#ccc;
/* border:1px solid red; */
width:100%;
font-size:16px;
font-family:arial;
line-height:4em;
}
h1:after{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:right;
background:#fff;
}

Answer 1

Here you go.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
h1 {
height: 60px;
display: block;
width: 50%;
margin: 0 auto;
text-align: center;
background: #ccc;
font-size: 16px;
font-family: arial;
line-height: 4em;
padding: 0 2em;
position: relative;
}
h1:before {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
content: "";
height: 100%;
width: 100vw;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
<h1>Lorem ipsum dolor sit.</h1>

Answer 2

A perfect replica
The solution is to set the title using the :before pseudo-element's content property.
Caveat: This is a poor solution for use in the real world. If this challenge (with its seemingly arbitrary restriction) represents a real-world use case, I suggest refactoring your HTML or CSS to allow for the use of additional markup and/or pseudo-elements or settling for an imperfect (but good enough) replication of the comp.
html,
body {
margin: 0;
padding: 0;
}
h1 {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
h1:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}
<h1></h1>
Update: (just for funsies)
If I were to be literal and true to the challenge to "receate this comp with one :before pseudo element", I would not use any html element other than the de facto body tag.
html {
margin: 0;
padding: 0;
}
body {
display: block;
position: relative;
box-sizing: border-box;
margin: 1em 0;
padding: 0;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
body:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}