Zoom issue with ::after & ::before borders - css

Question

I created a border effect using selectors that shows only on corners as you can see in the following snippet.
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit;
}
.ix-border{
position: relative;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #A00;
}
.ix-border, .ix-border:hover, .ix-border:before, .ix-border:after{
transition: 0.42s;
}
.ix-border:before, .ix-border:after{
content:'';
position:absolute;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #FFF;
}
.ix-border:before{
top: 8px; right:-1px; bottom: 8px; left:-1px;
border-width: 0 1px 0 1px;
}
.ix-border:after{
top:-1px; right: 8px; bottom:-1px; left: 8px;
border-width: 1px 0 1px 0;
}
.ix-border:hover{
border-color: #F00;
}
.ix-border:hover:before{
top: 16px; bottom: 16px;
border-width: 0 1px 0 1px;
}
.ix-border:hover:after{
right: 16px; left: 16px;
border-width: 1px 0 1px 0;
}
.elmt{
width: 120px;
height: 60px;
text-align: center;
line-height: 60px;
}
<div class="elmt ix-border">
Hello World
</div>
However, I noticed that when a zoom is performed, the element border, that is supposed to be hidden by the ::before/::after selector borders, is sometimes randomly visible on one or two sides, depending on the zoom factor and the navigator.
I added the box-sizing:border box so that borders are included in zooming calculations, as suggested here but it's still not fixed.
So, am I missing something? Is there any hack to fix it or any other way (css only) to achieve to same effect?

Answer 1

This is really good question but I think it is really hard to do with pseudo elements and CSS only ,so I will suggest an alternative approach with real html elements like this so now you avoid the issue but have an extra html elements :(
.corners {
position: relative;
height: 150px;
padding: 10px;
position: relative;
text-align: center;
width: 150px;
padding: 10px;
line-height:150px;
font-size:16px;
}
.top, .bottom {
position: absolute;
width: 10px;
height: 10px;
}
.top {
top: 0;
border-top: 1px solid;
}
.bottom {
bottom: 0;
border-bottom: 1px solid;
}
.left {
left: 0;
border-left: 1px solid;
transition: all 0.42s;
}
.right {
right: 0;
border-right: 1px solid;
transition: all 0.42s;
}
.corners:hover .right{
width:20px;
height:20px;
border-color:red;
}
.corners:hover .left{
width:20px;
height:20px;
border-color:red;
}
<div class="corners">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom right"></div>
<div class="bottom left"></div>
content goes here
</div>
Ok here is my another take on the issue this time I am using only 3 html elements
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
text-align:center;
line-height: 100px;
}
div div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
div div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div div {
margin: 0;
position: absolute;
top: 0;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
span:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div:hover span:after{
width:30px;
height:30px;
border-color:red;
}
div:hover span:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:after{
width:30px;
height:30px;
border-color:red;
}
<div>some content<div></div><span></span></div>