Schro Schro - 15 days ago 7
CSS Question

Animated color changing underline effect

I had a go at trying to figure this out, though I could not understand what code he had used.

http://riccardozanutta.com/

I want to recreate something similar to the effect he has on the top right hand corner. Where the animated sliding bar changes color as it appears and vanishes.

I am pretty sure the code from http://bradsknutson.com/blog/css-sliding-underline/ is the basis for this. I have managed to get the sliding bar to change color using it, but it is not as smooth and the color change is too sudden.

My attempt:
http://codepen.io/Dingerzat/pen/mOmzVp

/* CSS */

.sliding-u-l-r-l {
display: inline-block;
text-decoration:none;
color: #000000;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.sliding-u-l-r-l:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: blue;
transition: width .5s ease;
}
.sliding-u-l-r-l:hover:before {
width: 100%;
background: red;
transition: width .5s ease;
}
.sliding-u-l-r-l:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}


.

<!-- HTML -->
<a class=sliding-u-l-r-l href="http://codepen.io">A link that is and never is</a>

Answer

You're looking for something like this:

HTML

<a class=sliding-u-l-r-l href="http://codepen.io">A link that is and never is</a>

CSS

.sliding-u-l-r-l {
    display: inline-block;
    text-decoration:none;
    color: #000000;
    position: relative;
    padding-bottom: 3px;
}
.sliding-u-l-r-l:before {
    /*
      We moved the background color in here so that we remain
      visible after the link has been unhovered.
    */
    background: red;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    /*
      Take 1 second for the red underline's change in width to take affect.
      We don't want the background to fade out, so we removed the
      background transition.
      */
    transition: width 1s ease;
}
.sliding-u-l-r-l:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: blue;
    /*
      Change 1s to whatever length of time you want the blue underline to take.
      */
    transition: width 1s ease;
    /*
      Don't do our transition until the red underline has finished theirs.
      This should be at least as long as the length of the red transition.
    */
    transition-delay: 1s;
    /*
      Make sure the blue underline shows underneath the red one.
    */
    z-index: -1;
}
.sliding-u-l-r-l:hover:before {
    /*
      We don't need a background color in here anymore.
    */
    width: 100%;
    transition: width .5s ease;
}
.sliding-u-l-r-l:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

Other:

PS: If you have any questions or need any additional clarification, just ask.

PPS: Here's a link to an example.

P^3S: The CSS is commented. If something doesn't make sense or you don't understand something, you might find the explanation in the CSS comments.