transition on link's 'hover-off' not animating - html

Question

I have a button with a transition on hover
css
.main-nav li a {
position: relative;
display: inline-block;
padding: 12px 10px;
}
.main-nav li a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px; width: 0;
bottom: 3px; left: 0; right: 0;
}
.main-nav li a:hover { color: #d11e5d; }
.main-nav li a:hover:after { width: 80%; }
/* other links */ .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
html (generated from bootstrap/Wordpress)
<div class="main-nav">
<ul class="menu">
<li>
...
The after element animates in properly, but doesn't animate out (just stops abruptly)

Answer 1

The problem is that you are using the transition property in your :hover state.
Change this:
...other links... , .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
To this:
...other links... , .main-nav li a, .main-nav li a:after {
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
If you're wondering what is the difference between applying CSS transition property in hover rather than in its normal state, you can check this.
Notes:
Always make sure the property without vendor prefixes is placed
below the rest.

Answer 2

I see some issues in the last CSS block:
...other links... , .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
As a minor fix, I'll point out that the vendor prefixed transition properties should always precede the "standardized" CSS property. In other words, order the unprefixed transition style to be last following those for -webkit-, -moz-, -ms- and -o-. See this response SO answer to prefix ordering.
I notice you include the .main-nav li a:hover:after CSS selector. If this is what you're using to try and effect a CSS transition when hovering off, it won't work. The :after pseudo-element is not for this usage. Rather, what you want is to apply the transition styles you declared on .main-nav li a. Notice I didn't include the :hover pseudo-element. That's intentional. This way, I'm saying "I want to transition these properties (width, background-color & border) when I DO hover onto the selected element". Then, apply the different width, background-color and border CSS styles on the .main-nav li a:hover element separately. These will be the property styles that get transitioned to once you hover over the link. You'll notice that when you hover over the link now, the styles transition as desired.
If you're also trying to apply a secondary transition when hovering off the link, you'll have to apply those styles separately for the .main-nav li a:hover selector. Additionally, you would then declare a transition property on the .main-nav li a:hover selector. As it stands now, you have the same transition being applied to both the .main-nav li a and .main-nav li a:hover selectors (which is technically fine, just maybe not what you wanted). See this post Different Transitions for Hover On/Off
.main-nav li a {
position: relative;
display: inline-block;
width: 25%;
font: bold 3rem/2 Fantasy, Arial, sans-serif;
padding: 12px 10px;
}
/* .main-nav li a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px; width: 0;
bottom: 3px; left: 0; right: 0;
} */
.main-nav li a:hover {
width: 50%;
color: #d11e5d;
background-color: Yellow;
font: lighter 5rem/3 cursive, serif;
}
.main-nav li a:hover:after { width: 80%; }
/* ...other links */
.main-nav li a {
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
.main-nav li a:hover {
-webkit-transition: font 0.2s linear;
-moz-transition: font 0.2s linear;
-ms-transition: font 0.2s linear;
-o-transition:font 0.2s linear;
transition: font 0.2s linear;
}
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div class="main-nav">
<ul class="menu">
<li>
...
</li>
</ul>
</div>
</body>
</html>
Last, I'm assuming the ...other links text is intended as a comment. If so, that should be commented-out appropriately, /* Other links */, and can potentially cause issues.