Bottom-Border Hover Transition

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>

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 move border-bottom up on hover?

One way to achieve that is to change the value of bottom: value.

/*DEMO*/

*,*::before,*::after{box-sizing: border-box}

div{margin-top:3rem}

/****************************/

h1,

span{

  position:relative

}

h1:after,

span:after{

  content:'';

  position:absolute;

  left:0;

  bottom:-20px;

  right:0;

  border-bottom:2px red solid;

  transition:.5s

}

h1:hover:after,

span:hover:after{

  bottom:0;

  transition:.5s

}

<h1>Example block element</h1>

<div>

  <span>Inline element</span>

<div>

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>

Transition property weird effect on border size on hover

The reason for this happening is how the browser optimizes rendering. For animating / transitioning effects it often separates the affected element into a separate "composition layer" for performance reasons.

You can try several ways to attempt to fix the graphical issue:

1. add will-change attribute in order to tell the browser to keep the element on a separate layer

2. modify your transition: all 1s to a more specific one (e.g. transition: color 1s, border-bottom-color 1s). Also make sure to only modify the border-bottom-color attribute, not the whole border-bottom attribute with size and type (even though it stays the same)

On hover animate bottom border left to right

find working fiddle demo

give position relative to a tag.

<a href="#modal7" class="nombore">
     <span>/07</span>
     <span class="slider"></span>  
 </a>

.nombore{
    position:relative;
    display:inline-block;
    transition: all 0.3s ease-out;
}

transform bottom border on hover the outer div with css

EDIT: I moved the border-bottom: 2px solid #E5E9EC; to .lwb-col--link, add a border-bottom: 2px solid #57B0FB; to .lwb-col:hover .lwb-col--link::after and use the transform property on the normal and hover. It works, but the border-bottom inital, doesn't disappear, it's just override.

/* DEBUG */

.lwb-col {

    transition: box-shadow 0.5s ease;

}

.lwb-col:hover{

    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);

}

.lwb-col--link {

    font-weight: 500;

    position: relative;

    display: inline-block;

    border-bottom: 2px solid #E5E9EC;

}

.lwb-col--link::after{

    bottom: -3px;

    content: "";

    display: block;

    left: 0;

    position: absolute;

    width: 100%;

    color: #E5E9EC;

    transform: scaleX(0);

}

.lwb-col:hover .lwb-col--link::after {

    border-color: #57B0FB;

    display: block;

    z-index: 2;

    transition: transform 0.3s;

    transform: scaleX(1);

    transform-origin: left center;

    border-bottom: 2px solid #57B0FB;

}

<div class="lwb-col">

  <h2>Webdesign</h2>

  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem & professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>

<span class="lwb-col--link">Mehr erfahren</span>

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

---

Related Topics