Animate Length of Border-Bottom

Animate LENGTH of border-bottom

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);
}

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>

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 :

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>

How to animate border so that it displays slowly from start to finish

A way of making the border of an element looking animated is to gradually unveil the borders in turn by gradually shrinking a 5px wide (or high depending on which border) 100% wide element that is overlaying each border.

This snippet does this by animating the after pseudo element on the element and at the same time putting one border after another into the required final color.

You can put the class movingBorder from this snippet onto other elements to get the moving border effect.

.movingBorder {
  width: 60vw;
  height: 60vh;
  border: solid 5px lime;
  position: relative;
  background: pink;
  animation: changeBorders 5s linear;
}

@keyframes changeBorders {
  0% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75.02% {
    border: solid 5px lime;
  }
}

.movingBorder::after {
  width: 5px;
  background-color: white;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: -5px;
  z-index: 1;
  animation: movedown 5s linear;
  animation-fill-mode: forwards;
  content: '';
  display: inline-block;
}

@keyframes movedown {
  0% {
    height: calc(100% + 10px);
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25% {
    height: 5px;
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25.01% {
    height: 5px;
    width: calc(100% + 10px);
    bottom: -5px;
    left: -5px;
  }
  50% {
    height: 5px;
    width: 0%;
    left: 100%;
    bottom: -5px;
  }
  50.01% {
    height: calc(100% + 10px);
    width: 5px;
    left: 100%;
    bottom: -5px;
  }
  75% {
    height: 0;
    width: 5px;
    left: 100%;
    bottom: 100%;
  }
  75.01% {
    height: 5px;
    width: calc(100% + 10px);
    left: 0%;
    bottom: 100%;
  }
  99.01% {
    height: 5px;
    width: 0;
    left: 0;
    bottom: 100%;
  }
}

<div class="movingBorder" style="background: pink; width: 60vw; height: 60vh;"></div>

Animating bottom border (left to right)

hope you will trigger that animation with javascript, you can do it in pure CSS with transition, and setting right from 100% to 0 with extra class as animation transition: right 4s;

.slider is now inside the #name div, so it will move with it and top/left will be relative to this text

https://jsfiddle.net/0ou3o9rn/

version with CSS animation (adding animated class in javascript, but you can bind it somehow to hover, or other event on creation)
https://jsfiddle.net/tto1vrz5/

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>

How to animate a link underline with border-bottom, so that there is space between the link text and the underline?

The code you've presented uses a pseudo-element not the default text-decoration. Since the pseudo element is positioned absolutely, you can change the distance easily. Change the a:before bottom to -5px or whatever negative value fits the distance that you want:

a {  position: relative;  color: #000;  text-decoration: none;}
a:before {  content: "";  position: absolute;  width: 100%;  height: 2px;  bottom: -5px;  left: 0;  background-color: #000;  visibility: hidden;  -webkit-transform: scaleX(0);  transform: scaleX(0);  -webkit-transition: all 0.3s ease-in-out 0s;  transition: all 0.3s ease-in-out 0s;}
a:hover:before {  visibility: visible;  -webkit-transform: scaleX(1);  transform: scaleX(1);}

<a href="#">Long long text</a>

---

Related Topics