Zoom issue with ::after & ::before borders

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>