Css: Bottom-Border-Transition - Expand from Middle

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>

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 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>

How to animate border on input and make it expand from center?

You cannot use pseudo-element since it's an input tag so you can try this solution with linear-gradient as background:

#btn {
  margin: 10px;
  padding: 20px;
  width: 470px;
  height: 50px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background: 
    linear-gradient(red, red) bottom / 0% 2px no-repeat
    #ccc;
  transition: 1s;
}

#btn:hover {
  background-size: 100% 2px;
}

<input id="btn" type="submit" name="" value="Click">

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>

Animate menu border on hover

since you have not provided any code and did not specify which border animation, i assume you want to animate the bottom border starting from the middle. In that case, this great stackoverflow answer with demo answers it : click here

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.

how to increase border line from the center using css animation

what is wrong witn your code is you are simply increasing the height.
In order to grow on both side while increasing height you have to move that element towards the opposite side

Example: if you are increasing height 100px then you have to move opposite for 50px

CSS:

#cool
{
height:10px;
width:10px;
border-radius:4px;
margin-left:10%;
background-color:#431;
margin-top:20%;
animation:grow 3s forwards;
position:relative;
}

@keyframes grow
{
0% {
    height: 0px;
    top:0;
}
100%{
    height: 200px;
    top:-100px;
}
}

</style>

HTML:

<div id=cool>

</div>

</body>

for height 100px moving the element top -50px . Taken half of it, because to show the growth on both side. if top -100px then it will grow from the bottom.

I hope this helps

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>