悬停效果：扩大底部边框

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 {&nbsp; display:block;&nbsp; content: '';&nbsp; border-bottom: solid 3px #019fb6;&nbsp;&nbsp;&nbsp; transform: scaleX(0);&nbsp;&nbsp;&nbsp; transition: transform 250ms ease-in-out;}h1:hover:after { transform: scaleX(1); }h1.fromRight:after{ transform-origin:100% 50%; }h1.fromLeft:after{&nbsp; transform-origin:&nbsp; 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 {&nbsp; display:block;&nbsp; content: '';&nbsp; border-bottom: solid 3px #019fb6;&nbsp;&nbsp;&nbsp; transform: scaleX(0);&nbsp;&nbsp;&nbsp; transition: transform 250ms ease-in-out;}h1:before{&nbsp; position:absolute;&nbsp; bottom:1.2em; left:0;&nbsp; width:100%;}.ef2:hover:after {&nbsp; transition-delay:150ms;}&nbsp;&nbsp;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 {&nbsp; display:block;&nbsp; content: '';&nbsp; border-bottom: solid 3px #019fb6;&nbsp;&nbsp;&nbsp; transform: scaleX(0);&nbsp;&nbsp;&nbsp; transition: transform 250ms ease-in-out;}h1.fromLeft:after{ transform-origin: 100% 50%; }h1.fromRight:after{&nbsp; transform-origin:&nbsp; &nbsp;0% 50%; }h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin:&nbsp; &nbsp;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>