hrタグに :before と :after / IEとEdgeで問題が！

hrタグのラインに左右にアイコンを置いて装飾する際に、
beforeとafterで配置すると、何故かIEとEdgeで再現されませんでした。
ChromeやFirefoxは、意図した通りの動きをしてくれます。

こんなラインイメージ
● ——<hr>——- ●

hr {
    position: relative;
    background: none;
    border: none;
    border-bottom: 2px dotted #000;
    height: 0;
    margin: 20px 0;
}
hr:before,
hr:after {
    position: absolute;
    top: -6px;
    content: '●';
    width: 12px;
    height: 12px;
    background: #fff;
}
hr:before {
    left: 0;
}
hr:after {
    right: 0;
}