html - 真ん中に「OR」を付けてタグ付け

Question

このコードは、Firefox と Chrome で正常に動作します。問題は IE と Opera にあります - 「OR」は高さ 2px の領域でのみ表示されます。

hr {
  height: 2px;
  border: 0;
  background-color: #444;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
  content: 'OR';
  color:#ccc;
  display:block;
  text-align:center;
  background-color:#222;
  width:60px;
  margin:-10px auto 0 auto;
}

背景 #222222

HTMLでちょうど<hr>

IE と Opera で動作させるための提案はありますか?

ありがとう

---更新---[解決済み]---------------------------------------- -----

position:absolute; を追加する必要があります。左:50%; & 変換: 翻訳(-50%);

hr {
    height:2px;
    border:0;
    background-color: #444;
    line-height:20px;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
    content: 'OR';
    color:#ccc;
    display:block;
    text-align:center;
    background-color:#222;
    width:60px;
    margin-top:-10px;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);  
}

ありがとう