inline-block Pseudo Element forcing size and squeezed out of main element - pseudo-element

Question

I am trying to make a handle bar element with a nice textured line pseudo element that is horizontally and vertically centered in the middle of it.
I understand that lots of people do this effect with background images but I want this to be vector so that it works even on high density displays.
Demo: jsFiddle
The whole thing just uses a single element and uses this CSS:
html, body
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header_handle
{
width: 100%;
height: 7px;
position: relative;
background: #9e978b;
border-top: 1px solid #b8b1a5;
border-bottom: 1px solid #827c72;
text-align: center;
cursor: s-resize;
}
.header_handle:before
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
background: #ff0000;
width: 10px;
height: 100%;
}
.header_handle:after
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
width: 42px;
height: 1px;
background: #ada599;
outline: 1px solid #ada599;
border-top: 1px solid #6b665e;
border-bottom: 1px solid #6b665e;
}
Here is a second demo that shows the basic effect in action at a bigger level. It just has aligning inline-block element and then the centered inline-block element.
The desired effect should look like this:
The first demo above works at heights above 22px and if you turn off the height attribute it expands to 22px so it seems to think the pseudo element is 22px or something like that.
What the heck is going on here?

Answer 1

Add font-size: 0; to the main element .header_handle. This eliminates any space between inline elements.
I got the trick from the Fighting the Space Between Inline Block Elements on CSS-Tricks.