IE10 псевдо элементы на качестве <hr> с отрицательным позиционирование не работает

Question

Я пытаюсь отрицательно позиционировать :before и :after псевдо элементы на <hr>, но IE10 является упрямство и просто не показывает эти элементы.

Вот мой пример: http://jsfiddle.net/Shpigford/HyVMR/

Это, кажется, работает хорошо во всех браузерах за исключением IE10. Он не показывает левый и правый блоки.

Он отлично работает с <div>, но с использованием <hr> вызывает левые элементы псевдо не отображаться на всех

CSS:

hr { 
    background:red; 
    margin:0 150px; 
    height:50px; 
    position:relative; 
} 
hr:before { 
    content: ''; 
    position:absolute; 
    height:50px; 
    left:-150px; 
    width:150px; 
    background:green; 
} 
hr:after { 
    content: ''; 
    position:absolute; 
    height:50px; 
    right:-150px; 
    width:150px; 
    background:blue; 
} 

Answer 1

Try переполнения: видимый; на <hr>

hr { 
background:red; 
margin:0 150px; 
height:50px; 
position:relative; 
overflow:visible; 

}