When hovering between the two borders, an undesirable (albeit very small) border appears around them. Can anyone assist me with this issue and explain why it is happening? I have attempted to set a transparent border on each element but without success.
Regards, Sandro
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.content {
height: 100vh;
width: 50vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.content .line-left {
width: 3px;
height: 100%;
background-color: #286090;
position: absolute;
left: 25px;
bottom: 0;
}
.content .line-left::after {
content: '';
width: 3px;
height: 100%;
background-color: #bfbfbf;
position: absolute;
bottom: 0;
}
.content .line-right {
width: 3px;
height: 100%;
background-color: #286090;
position: absolute;
top: 0;
right: 25px;
}
.content .line-right::after {
content: '';
width: 3px;
height: 100%;
background-color: #bfbfbf;
position: absolute;
top: 0;
}
.content:hover .line-left::after, .content:hover .line-right::after {
height: 0;
transition: height 2s cubic-bezier(.15,.65,1,.15);
}<div class="content">
<div class="line-left"></div>
<div class="line-right"></div>
</div>