CSS separator pseudo-element with an image and a line on both sides?

Question

I was tasked with making a separator between blocks of content that has an image in the middle and two lines on either side center-aligned to the image. Here are the goals I set for the solution:

1. Single pseudo-element solution; no markup added
2. Responsive
3. Minimal CSS
4. No JS

This is what I came up with (removed from the context of the project). Basically, I have some "–" in the content property of the pseudo-element, with the color set to transparent. Then I make two text-shadows and position them on either side.

It works, but it's got some problems:

1. Hacky
2. If you made the lines longer, the only way to make it responsive is media queries
3. Really fiddly to get the "borders" in the right place (because I'm not exactly sure how wide the dashes are)
4. Only works with certain fonts (some fonts have spaces between their dashes)
5. Can't change the thickness of the lines

Is there a better way to do this?

Answer 1

Fun one. I used the :before pseudo selector for the line with two variations.

The background image is a base64 encoded 1px white PNG from http://px64.net/

First variation goes completely through the circle. The :after pseudo element has a higher z-index.

&:before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=");
    background-repeat: repeat-x;
    background-position: center center;
    content:' ';
    display:block;

    width:10em;        /* guessing the reqs here */
    height:4em;

    position: absolute;
    bottom: 2em;       /* half the :before's height */
    left: 50%;         /* move it over 50% */
    margin-left: -5em; /* and pull it back by half of its width */
    z-index: 1;
}

The second variation is probably closer to what you want. It uses two copies of the 1X1px image, puts them on either side of the box and then stretches them into lines with the background-size property.

&:before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII="), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: 50px 2px, 50px 2px;
    content:' ';
    display:block;
    /* continues with same sizing and positioning stuff.*/
}

Here's the pen: http://codepen.io/anon/pen/AljJn