I'm trying to get the transition effect of an underscore extension to the left or right to the end when 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>

My attempt: jsfiddle

Translation of the question: Expand bottom border on hover

  • one
    Possible duplicate question: Smooth increase of underscore text - Crantisz
  • @Crantisz in my opinion, here is a more complete solution, with more options. - Alexandr_TT
  • association: stackoverflow.com/questions/28623446/… - Alexandr_TT
  • @Crantisz I will add another clarification - this is a translation of the original article with enSO, which was published exactly two years earlier than your article

1 answer 1

To extend the lower bound when hovering, you can use transform: scaleX '(); ( link mdn ) and the transition from 0 to 1 in the hover state.

enter image description here

The border and transition are set on the pseudo-element to prevent text from moving and to avoid adding markup.
To expand the bottom border to the left or to the 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 lower bound when two lines hover

You can achieve the same effect when the text takes 2 lines. The before pseudo-element is absolutely positioned to underline the first line set - 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>

The different direction of underlining when hovering and moving the cursor:

 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:hover:after { transform: scaleX(1); } h1.fromLeft:hover:after{ transform-origin: 0% 50%; } h1.fromRight:hover:after{ transform-origin: 100% 50%; } 
 <h1 class="fromRight">Expand from right</h1><br/> <h1 class="fromLeft">Expand from left</h1>

Translation answer: Expand bottom border on hover @ web-tiki