在悬停时展开底部边框 [英] Expand bottom border on hover

问题描述

我尝试在边框上悬停时产生过渡效果。

  h1 {color：＃666;} h1：after {position：absolute ; left：10px; content：''; height：40px; width：275px; border-bottom：solid 3px＃019fb6;过渡：左边250ms缓入，右边250ms缓入; opacity：0;} h1：hover：after {opacity：1;}  

 < h1> CSS is AWESOME< / h1>  

我尝试过更改为伪元素的左侧或右侧：

  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从中心起< br />< h1 class =fromRight>从右展开< / h1>< br />< h1 class =fromLeft> h1>  

以最大化浏览器支持（请参阅 canIuse ）。

用两行悬停时展开底边框

当文本跨越两行时，您可以实现此效果。前面的伪元素被绝对定位，以使 bottom：1.2em; ：

第一行的下划线

div class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  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;底部：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 /两条线< / h1> 
 
 
 

将鼠标悬停进来时出现不同的转换方向：

  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从右侧开始< / h1>< br />< h1 class =fromLeft>从左侧展开  
 
I'm trying to get a transition 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
解决方案
In order 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.



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 :



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>





                        
这篇关于在悬停时展开底部边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！