悬停效果：扩大底部边框

Question

我试图在边框上获得过渡悬停效果，使边框在悬停时扩展。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>

Answer 1

要扩展悬停时的底部边框，可以使用transform:scaleX'();（mdn reference）并将其在悬停状态下从0过渡到1。

这是边框悬停效果的示例：

边框和过渡设置在伪元素上，以防止过渡文本并避免添加标记。

要从左侧或右侧扩展底部边框，可以将transform-origin属性更改为伪元素的左侧或右侧：

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>

注意：您需要添加供应商前缀以最大化浏览器支持（请参见canIuse）。

用2行扩展悬停时的底部边框

当文本跨两行时，您可以实现此效果。before伪元素的绝对位置是使第一行的下划线为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>

悬停进出时的不同过渡方向：

关键是在悬停状态下将变换原点位置从一侧更改为另一侧。这样，当元素不再悬停时，底部Boder 将从悬停的一侧进入而从另一侧退出。

这是一个演示：

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>