The delay will not happen if you explicitly define the colors of the normal state and hover state for the anchor and its pseudo elements. For borders, you could define the color to be transparent
instead of the background color.
http://jsfiddle.net/myajouri/E8PqJ/
CSS
.el,
.el:before,
.el:after {
-webkit-transition: all 1s;
transition: all 1s;
}
.el,
.el:before,
.el:after {
color: blue;
font-size: 32px;
border-bottom: 1px solid transparent;
}
.el:before,
.el:after {
padding-bottom: 20px;
}
.el:before {
content: "before ";
}
.el:after {
content: " after";
}
.el:hover,
.el:hover:before,
.el:hover:after {
color: red;
border-bottom: 1px solid red;
}