This particular code functions correctly on the Firefox and Chrome browsers. However, there seems to be an issue with IE and Opera, where the 'OR' text is only visible within a 2px height area.
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;
}
The background should be set as #222222.
In HTML, simply use <hr>.
Do you have any suggestions on how to fix this for IE and Opera?
Thank you
---UPDATE---[SOLVED]---------------------------------------------
To resolve the issue, position:absolute; left:50%; & transform: translate(-50%); need to be added.
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%);
}
Thank you