CSS snippet not working on IE :before/:after

Question

I'm trying to create a heading with lines on both sides. For some reason it doesn't work on IE only on the left side.

http://jsfiddle.net/1qp9dvuL/

 h2 { position: relative; overflow: hidden; text-align: center; } h2:before, h2:after { position: absolute; top: 44%; overflow: hidden; width: 50%; height: 1px; margin-left: 5%; content: '\\a0'; background-color: red; } h2:before { margin-left: -55%; text-align: right; }

 <h2>THE HEADING</h2>

Answer 1

Solution that works in Chrome/FF/IE

Here is an alternative work-around that works for content/text with varying widths.

Example Here

The reason it wasn't work in IE was because the pseudo elements weren't being positioned relative to the text. To work around that, I removed the absolute positioning from the pseudo elements, and set the display to table-cell so that they are positioned relative to the text.

Adjust the right / left positioning to control the space around the text.

 .line { display: table; white-space: nowrap; overflow: hidden; text-align: center; } .line:before, .line:after { content: ''; display: table-cell; position: relative; top: 0.5em; width: 45%; height: 1px; border-top: 1px solid #f00; } .line:before { right: 5%; } .line:after { left: 5%; }

 <h2 class="line">THE HEADING</h2> <h2 class="line">THE LONGER HEADING</h2>