Negative Margin and Text-Align:Center - css

Question

Some wise guy has written the following code and it works (Text centered with two lines on both sides).
h1 {
width: 90%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .5em;
}
<h1>Text Centered</h1>
But I dont understand how the value -55% of margin-left and margin-right is calculated. If you change that to something else, it wont work.

Answer 1

OK, I'll give this a shot.
Each of the pseudo-elements is 50% wide of the heading...but since there are inside the heading (which would normally be one line...it breaks
See:
h1 {
width: 90%;
margin: .7em auto;
text-align: center;
font-weight: 300;
color: #000;
border: 1px solid red;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {}
<h1>Text Centered</h1>
Well we don't want that...so we push each of them off to one side by adding the negative margins.
h1 {
width: 90%;
margin: .7em auto;
text-align: center;
font-weight: 300;
color: #000;
border: 1px solid red;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -50%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -50% 0 .5em;
}
<h1>Text Centered</h1>
However, the lines are now sticking out of the box...and we don't want that. We solve this by adding overflow:hidden to the heading.
h1 {
width: 90%;
margin: .7em auto;
text-align: center;
font-weight: 300;
color: #000;
border: 1px solid red;
overflow: hidden;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .5em;
}
<h1>Text Centered</h1>
As for why 55% specifically I can't say other than it shoud be higher than 50% to ensure the line doesn't break when the element gets narrow.

Answer 2

The -55% are moving the elements to the right and left by 55% of the width of the h1 element, and the 0.5 em up by half the size of the text. Since the added elements have a border bottom, this is now in the vertical middle of the h1 and slightly outside the h1 (by 5% of the width of the h1: 50% =half plus 5%). BTW, it does work with other values, here's the same changed to -60%:
h1 {
width: 90%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -60%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -60% 0 .5em;
}
<h1>Text Centered</h1>