How to get an animated underline effect in HTML?

Question

I am designing my personal website for the very first time using Bootstrap. I think it would be an amazing learning experience. I have used Jekyll in the past but I ended up learning very little out of that.

For my website, I'd like to use the animated underline seen at http://tobiasahlin.com/spinkit/ when you hover over 'Source' or 'View on Github'. I tried looking for it at places but could not find it as I'm not sure if I am searching for the right things.

I would appreciate it if someone showed me a way to write this. I am assuming CSS would be used for such an effect.

Thank you.

Answer 1

This fiddle help you to find a way. It uses only the CSS to animate.

<h3 class="sliding-middle-out">Underline – Middle Out</h3>
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background: blue;
}