html - 带有负定位的 <hr> 上的 IE10 伪元素不起作用

Question

我正试图对 :before 进行负面定位和 :after <hr> 上的伪元素，但 IE10 很固执，只是不显示这些元素。

这是我的例子:http://jsfiddle.net/Shpigford/HyVMR/

这似乎在除 IE10 之外的所有浏览器中都能正常工作。它不显示左右 block 。

它与 <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

在 <hr> 上尝试 overflow:visible;

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