I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)

I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.

Any help is really appreciated.

I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)

I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.

Any help is really appreciated.

• javascript
• jquery
• css
• hover

• It's not javaascript. It's a pseudo element whose width is transitioned via transform:scale on hover of the parent. – Paulie_D Commented Mar 20, 2014 at 12:28

3 Answers 3

Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.

jsfiddle.

span
{
    display: inline-block;
    padding: 6px 0px 4px;
    margin: 0px 8px 0px;
    position: relative;
}

span:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 0px;
    border-bottom: 1px solid black;
    bottom: 2px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
}

span:hover:before
{
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

You can't have the border a different length to the element that it surrounds. However you can achieve a similar effect using just CSS - with a pseudo element. How about something like the following:

div:after{
    position:absolute;
    bottom:0;
    left:50%;
    height:1px;
    width:0%;
    background-color:#444;
    display:block;
    content:'';
    transition:0.3s;
}

div:hover:after{
    left:0;
    width:100%;
}

JSFiddle

Its not border-bottom, it is done using css pusedo element :before

.navigation li a::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
}

.navigation li a::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
}