Hover effect : expand bottom border

Question

I'm trying to get a transition hover effect on border that the border expands on hover.

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: left 250ms ease-in-out, right 250ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}

<h1>CSS IS AWESOME</h1>

I've tried this on Jsfiddle

web-tiki · Accepted Answer · 2018-08-20T13:13:57.373

280

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>

Note : You need to add vendor prefixes to maximize browser support (see canIuse).

Expand bottom border on hover with 2 lines

You can achieve this effect when the text spans on 2 lines. The before pseudo element is absolutely positioned to make underline of the first line with bottom:1.2em;:

h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:before{
  position:absolute;
  bottom:1.2em; left:0;
  width:100%;
}
.ef2:hover:after {
  transition-delay:150ms;
}
  
h1:hover:after, h1:hover:before { transform: scaleX(1); }

<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>

Different transition direction on hover in and out :

The point is to change the transform-origin position from one side to the other on the hover state. This way the bottom boder enters from one side on hover and exits on the other when the element isn't hovered anymore.
Here is a demo :

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.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{  transform-origin:   0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin:   0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }

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

edited Aug 20 '18 at 13:13

answered Feb 20 '15 at 07:16

web-tiki

99,765
32
217
249

2

With `scaleX(0.0001)` I'm getting some artifacts but setting it to `scaleX(0)` seems to solve this. – Christiaan Maks Jul 29 '16 at 14:04
1

@ChristiaanMaks you are right. I am updating the answer – web-tiki Jul 29 '16 at 14:29
Is there anyway to do this if the sentences span multiple lines? – Philip Jul 31 '16 at 19:50
@Philip you can achieve this effect when te text has 2 lines (see my edit in this answer). – web-tiki Aug 01 '16 at 08:38
2

What if you have This is a sentence that spans one line.This is a sentence that spans two lines but starts on the first line – Philip Aug 04 '16 at 20:07
how to implement in menu dropdown? – LSM Sep 07 '18 at 22:18
@LidyMonteiro it depends on your markup and context. I can't answer with such little information, sorry. – web-tiki Sep 08 '18 at 11:53
How can you do on inputs? Doesn't seem to work. http://jsfiddle.net/vxm3b4fe/ (Also if possible, instead of hover I would like to do `:focus`) – JBis Nov 21 '18 at 12:38
@JBis unfortunatly inputs don't support pseudo elements so this technique can't be use to underline inputs – web-tiki Nov 21 '18 at 13:01
@web-tiki That's unfortunate :(. Thanks for the quick reply. +1 anyway :) – JBis Nov 21 '18 at 13:02
2

@JBis you could do something similar though like this : http://jsfiddle.net/vxm3b4fe/1/ click in the name input. – web-tiki Nov 21 '18 at 13:06
@web-tiki Perfect! Thanks. Just don't use a *pseudo* element, instead use a real one. – JBis Nov 21 '18 at 13:09
@web-tiki Maybe add that as an option in the answer. Same example, just without a pseudo element :) – JBis Nov 21 '18 at 13:09
@JBis I would rather keep the answer simple as it is now. It works for the vast majority of use cases. – web-tiki Nov 21 '18 at 14:12
3

I'm trying to use this on the bottom of a div, but it's positioning the line separately from the div and making it shorter than the width of the div. How do I control the layout so that it maintains the same length, position as a standard bottom-border style? – Alex Banman Aug 23 '20 at 22:03

doğukan · Answer 2 · 2020-07-26T08:58:23.520

We can do this with only background. No pseudo-element needed. This is more flexible.

h1 {
  /* you can change these variables to control the border */
  --border-color: purple;
  --border-width: 5px;
  --bottom-distance: 0px; /* you can increase this */
  
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

.fromCenter {
  background-position: 50% calc(100% - var(--bottom-distance));
}

.fromRight {
  background-position: 100% calc(100% - var(--bottom-distance));
}

.fromLeft {
  background-position: 0 calc(100% - var(--bottom-distance))
}

h1:hover {
  background-size: 100% var(--border-width);
}

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

Multiple line animation:

h1 {
  /* you can change these variables to control the border */
  --border-color: purple;
  --border-width: 5px;
  --bottom-distance: 0px; /* you can increase this */
  
  color: #666;
  display: inline; /* should be 'inline' for multiple line animation */
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.5s;
}

.fromCenter {
  background-position: 50% calc(100% - var(--bottom-distance));
}

.fromRight {
  background-position: 100% calc(100% - var(--bottom-distance));
}

.fromLeft {
  background-position: 0 calc(100% - var(--bottom-distance))
}

h1:hover {
  background-size: 100% var(--border-width);
}

<h1 class="fromLeft">Expand from <br>left with <br>multiple line</h1>

score 15 · Answer 3 · answered Apr 15 '18 at 21:48

simple and lightweight version

li {
    margin-bottom: 10px;
}

.cool-link {
    display: inline-block;
    color: #000;
    text-decoration: none;
}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}

.cool-link:hover::after {
    width: 100%;
    //transition: width .3s;
}

<ul>
    <li><a class="cool-link" href="#">A cool link</a></li>
    <li><a class="cool-link" href="#">A cool link</a></li>
    <li><a class="cool-link" href="#">A cool link</a></li>
</ul>

Thanks! The accepted answer didn't work for me, but this did. If anyone else is having issues give this a try. — Evan, Jun 24 '19 at 03:12

score 6 · Answer 4 · answered Mar 25 '16 at 17:59

I know this is an old post and it is already answered but you might like the following effect too.

<div class="cd-single-point">
    <a class="cd-img-replace" href="#0"></a>
</div>

   .cd-single-point {
    position: absolute;
    list-style-type: none;
    left: 20px;
    top: 20px;
  }

  .cd-single-point>a {
      position: relative;
      z-index: 2;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0079ff;
      -webkit-transition: background-color 0.2s;
      -moz-transition: background-color 0.2s;
      -o-transition: background-color 0.2s;
      transition: background-color 0.2s;
  }

  .cd-single-point::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: cd-pulse 2s infinite;
  }

  @keyframes cd-pulse
  {
  0%  {box-shadow:0 0 0 0 #0079ff}
  100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
  }

DEMO

score 6 · Answer 5 · answered Feb 13 '18 at 10:53

h1 {
  color: #666;
  display:inline-block;
  margin:0;
  text-transform:uppercase;
 }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #92a8d1;  
  transform: scaleX(0);  
  transition: transform 800ms ease-in-out;
}
h1:hover:after {
 transform: scaleX(1);
}

<h1 class="fromCenter">Hover Over Me</h1><br/>

score 4 · Answer 6 · answered Oct 22 '21 at 17:06

h1 {
  /* you can change these variables to control the border */
  --border-color: purple;
  --border-width: 5px;
  --bottom-distance: 0px; /* you can increase this */
  
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

.fromCenter {
  background-position: 50% calc(100% - var(--bottom-distance));
}

.fromRight {
  background-position: 100% calc(100% - var(--bottom-distance));
}

.fromLeft {
  background-position: 0 calc(100% - var(--bottom-distance))
}

h1:hover {
  background-size: 100% var(--border-width);
}

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

score 3 · Answer 7 · answered Feb 20 '15 at 09:23

we can do using simple transition effect.

HTML

<h1>CSS IS AWESOME</h1>

CSS

h1 {
    color: #666;
    position: relative;
    display: inline-block;
}

h1:after {
    position: absolute;
    left: 50%;
    content: '';
    height: 40px;
    height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: 0;  
}

h1:hover:after {
    width: 270px;
    margin-left: -135px;
}

Link to Fiddle

score 1 · Answer 8 · answered Feb 20 '15 at 07:15

1

transition: all 1000ms ease-in-out;

Demo

or are you looking for this

Demo2

answered Feb 20 '15 at 07:15

himanshu

1,732
1
11
12

Mohammad Ayoub Khan · Answer 9 · 2019-10-07T23:36:52.897

1

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: all 550ms ease-in-out;
  border-bottom-width: 0px;
}

h1:hover:after {
  border-bottom-width: 5px;
}

<h1>CSS IS AWESOME</h1>

edited Oct 07 '19 at 23:36

answered Feb 13 '18 at 10:42

Mohammad Ayoub Khan

2,422
19
24

Hover effect : expand bottom border

9 Answers9

Expand bottom border on hover with 2 lines

Different transition direction on hover in and out :

Linked

Related