Hovering Animations


Upon hovering over an a attribute I wish to make a thick blue line appear below the text, spreading from the center; like the animation shown in this link; http://ianlunn.github.io/Hover/ (Border Transitions >>> Underline from Center)

How can I do this, and also remove the underlining of the text when being hovered on (which is set by default)...

Here's my code:


<div class="wholePage">
<div class="spaceAboveNav">
<!--    This takes up space above the navigation bar...-->

<div class="container">
    <div class="navigationMenu">
        <ul class="pull-left">
        <!--        Pull this to the left...-->
            <li><a href="#">home</a></li>
            <li><a href="#">about us</a></li>

        <ul class="pull-right">
            <!--        Pull this to the right...-->
        <li><a href="#">sign up</a></li>
        <li><a href="#">log in</a></li>
<div class="extraBit1">
<!--Empty Space...-->


.navigationMenu a {
  color: dodgerblue;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  padding: 1px 10px;
  font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;

.navigationMenu li {
    display: inline;

.navigationMenu {
    margin-top: 10px;
    height: 45px;
    background-color: white

.navigationMenu ul {
    margin-left: 15px;
    margin-right: 50px;
    margin-top: 11px;

.spaceAboveNav {
    height: 10px;
    background-color: white;

.wholePage {
    background-color: blue;   

.extraBit1 {
    height: 5px;

Thanks for the help in advance! :sun_with_face:


Hi Goldendraws,

If you look at the source code for hover.css, from lines 2448 to 2480, you'll be able to see the code used for that effect :)

Alternatively, you could just link up that CSS file and apply the .hvr-underline-from-center class to your <a>, and not have to copy anything :)


are you sure you are not going a bit out of your league here? You can make the underline in the link away by doing:

a:hover {
  text-decoration: underline;


I'd like to think I can try different things; rather than sticking to what I already know. This way I can learn more, and use it in other development projects. :stuck_out_tongue:

Quick question; how can I remove the underline that's originally there?

I've tried:

.divname {
    text-decoration: none;

and .

.divname a:hover {
    text-decoration: none;


.divname:hover {
    text-decoration: none;

None of these have removed the underline...


link won't inherit from it's parent, so you need both of these:

a:hover {
  text-decoration: none;
a {
  text-decoration: none;