Hover Effect: Expand Bottom Border

Hover effect : expand bottom border

To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state.

Here is an example of what the border hover effect can look like :
Expand border hover effect

The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.

To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }h1:after {  display:block;  content: '';  border-bottom: solid 3px #019fb6;    transform: scaleX(0);    transition: transform 250ms ease-in-out;}h1:hover:after { transform: scaleX(1); }h1.fromRight:after{ transform-origin:100% 50%; }h1.fromLeft:after{  transform-origin:  0% 50%; }

<h1 class="fromCenter">Expand from center</h1><br/><h1 class="fromRight">Expand from right</h1><br/><h1 class="fromLeft">Expand from left</h1>

Expand bottom border on hover not working?

There were two main problems with your code (other than the syntax errors):

You weren't setting display: block to the a:after pseudo-element. This is mandatory as it is the one that provides the pseudo-element a height and a width. Without this, the pseudo-element will be 0 x 0px and so you won't be seeing anything.
The way your Sass code was indented (I assumed you're using Sass syntax and not the SCSS one based on the missing colons, braces and indentations) means that a:hover:after selector is nested under the a:after selector and so the final selector output would be .menuHolder li a:after a:hover:after. This doesn't match any element and so nothing happens on hover.

Other than these two changes, there were 3 places where the indentations were not consistent. That is there were areas where 5/7 spaces were provided instead of the normal 2/4/6/...

The fixed code in Sass syntax would be as follows. A demo with equivalent SCSS syntax is available here. I've used SCSS syntax for the demo because JSFiddle doesn't support Sass syntax.

a:link, a:visited
  text-decoration: none
  color: black

.menu
  white-space: nowrap
  overflow: hidden

.menuHolder
  overflow: hidden
  position: fixed
  display: inline-block
  top: 0
  right: 0
  width: 110%
  padding: 6px 0 0
  background-color: rgba(70, 106, 135, 0.65)
  text-align: right
  transition: all 1s ease-in-out
  max-height: 37px
  z-index: 10

  ul
    margin: 0
    padding: 0

  li:hover
    a
      cursor: pointer
      color: $menuGreen
      transition: all 0.1s ease-in-out

  li, #menuBtnOn
    transition: all 0.1s ease
    text-indent: initial
    resize: none
    float: right
    display: inline-block
    padding: 15px
    line-height: 5px
    font-family: "Roboto", sans-serif
    font-weight: lighter
    font-size: 14px
    color: black

    &:not(:first-child)
      border-right: 1px solid rgba(37, 37, 37, 0.28)

    a:after
      display: block
      content: ""
      border-bottom: solid 3px $menuGreen
      transform: scaleX(0)
      transition: transform 250ms ease-in-out
      margin-top: 10px

    a:hover:after
      transform: scaleX(1)

  #menuBtnOff,
  #menuBtnOn
    transition: all 0.3s ease
    cursor: pointer
    color: black

    &:hover
      color: $menuGreen

  #menuBtnOn
    font-size: 20px
    float: left

One additional improvement that I'd suggest is to put the :hover effect on the li itself (that is, have the selector as .menuHolder li:hover a:after instead of .menuHolder li a:hover:after) because the change of text color happens on the :hover of the li itself and this would make it consistent.

Here is a demo for this version.

CSS expand border-bottom with transition on hover

using this

div{
position:fixed;}

and remove margin-left it will work

h1 {  text-align: center;  color: #666;  position: fixed;  display: inline-block;}
div{position:fixed;}
div:after {  position: absolute;  left: 50%; content: ''; height: 5px;  background: blue;  transition: all 0.5s linear;  width: 0;  bottom: 0;  }
div:hover:after { width: 100%;  left:0;}

<div style="height: 100px; width: 300px">  <h1>CSS IS AWESOME</h1></div>

CSS: bottom-border-transition - expand from middle

You can do the border transition with CSS.
Hope this helps.
CODEPEN example

HTML :

body {  padding: 50px;}
a, a:hover {  color: #000;  text-decoration: none;}
li {  display: inline-block;  position: relative;  padding-bottom: 3px;  margin-right: 10px;}li:last-child {  margin-right: 0;}
li:after {  content: '';  display: block;  margin: auto;  height: 3px;  width: 0px;  background: transparent;  transition: width .5s ease, background-color .5s ease;}li:hover:after {  width: 100%;  background: blue;}

<ul>  <li><a href="#">HOME</a></li>  <li><a href="#">PAGE</a></li>  <li><a href="#">ABOUT US</a></li>  <li><a href="#">CONTACT US</a></li></ul>

CSS border-bottom should extend when hover

You could use a positioned pseudo-element

a {  text-decoration: none;  position: relative;}a::before {  content: '';  position: absolute;  background: red;  height: 2px;  top: 100%;  left: 0;  width: 0%;  transition: width 0.5s ease;}a:hover::before {  width: 100%;}

<a href="#">Benutzername:</a>

bottom-border hover transition

Here is a simple sample using the pseudo element ::after

The advantage using this in favor of the border-bottom, it will not move the element up and down

a {  position: relative;  padding: 10px 20px;}a::after {  content: ' ';  position: absolute;  left: 0;  bottom: -5px;  width: 100%;  height: 0;  background: blue;  transition: height 0.3s;}a:hover::after {  height: 5px;  transition: height 0.3s;}
a + a::after {  content: ' ';  position: absolute;  left: 0;  bottom: -5px;  width: 0;  height: 5px;  background: blue;  transition: width 0.3s;}
a + a:hover::after {  width: 100%;  transition: width 0.3s;}

<a> Hover me </a> <a> Hover me 2 </a>

How to animate a border-bottom over an existing border-bottom on hover without using pseudo-states

A simple background animation can do it:

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
  background:
    linear-gradient(#019fb6 0 0),
    linear-gradient(lightgray 0 0); 
  background-size:0% 3px,100% 3px; /* we make the top one 0% width */
  background-position:bottom left;
  background-repeat:no-repeat;
  transition:0.5s;
}


h1:hover {
  background-size:100% 3px; /* 100% width on hover */
}

<h1 class="fromLeft">Expand from left</h1>

How to animate border transition expand with CSS?

You can still achieve this by using a pseudo-element (with background) and expand it on hover. All that is required is to set the value for the bottom property as the inverse of expected border-width and also set the height of the pseudo-element to be the same as the border-width.

h1 {  color: #666;  position: relative;  display: inline-block;}h1:after {  position: absolute;  left: 50%;  content: '';  height: 3px;  background: #f00;  transition: all 0.5s linear;  width: 0;  bottom: -3px;}h1:hover:after {  width: 100%;  left: 0px;}

<!-- assume the border-bottom is only applied to an active=clicked navigation tab --><h1 style="border-bottom: 3px solid green;">Tab1</h1><h1>Tab2</h1>

Hover Effect: Expand Bottom Border