I'm currently experiencing difficulties trying to fade in a navigation item using before and after pseudo-elements.
When I hover over the nav item, it should transition its background-color from white to blue. It's a simple effect, but it also needs to display two background images by adjusting the ::before pseudo-element from 0 to 1 and the ::after pseudo-element from 0 to 1 as well.
The issue arises when even though I have set the same transition duration, the fade behavior of the element is slightly different compared to the background color transition on the element itself.
You can experiment with the hover effect (jsfiddle) by rapidly moving your mouse in and out to observe the issue more clearly.
If anyone could assist me in solving this mystery, it would be greatly appreciated :)
Here is my jsfiddle: https://jsfiddle.net/5qnw8ke4/
Here is a screenshot illustrating the transition problem: screen capture
a {
display: block;
width: 61px;
height: 67px;
margin: 50px;
background-color: #fff;
text-align: center;
font-family: "Roboto", sans-serif;
text-decoration: none;
line-height: 67px;
color: #259cff;
position: relative;
transition: background-color 0.3s, color 0.3s;
}
a::before, a::after {
opacity: 0;
height: 100%;
position: absolute;
top: 0;
content: "";
-webkit-transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
}
a::before {
width: 12px;
left: -12px;
background: url("https://svgshare.com/i/J61.svg") no-repeat 0;
background-size: auto 100%;
}
a::after {
width: 12px;
right: -12px;
background: url("https://svgshare.com/i/J4j.svg") no-repeat 100%;
background-size: auto 100%;
}
a:hover {
background-color: #259cff;
color: #fff;
}
a:hover::before, a:hover::after {
opacity: 1;
width: 17px;
}
a:hover::before {
left: -17px;
}
a:hover::after {
right: -17px;
}<a href="#">My link</a>