I have a navigation that is using css transitions for a “current” state. The transitions work correctly for everything except the :after element that has an arrow head. I am trying to get the :after element to animate from right:0; to right:-41px.
It appears that you cannot apply a transform to a pseudo element/selector. Is this correct?
#mainNav li a.current{
border-right: 29px solid rgba(63, 112, 181, 1);;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topright: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
color: #fff;
color: rgba(255,255,255,1);
background: #3f70b5;
background: rgba(63, 112, 181, 1);
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#mainNav li a:after{
content: "";
position: absolute;
right: 0;
top: 0;
width:0px;
height:0px;
border-bottom:16px solid transparent;
border-top:16px solid transparent;
border-left:12px solid #3f70b5;
font-size:0px;
line-height:0px;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#mainNav li a.current:after{
right: -40px;
}
