css – 在悬停上展开底部边框

我试图在边框在悬停上展开的边框上获得过渡效果。

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>

我在Jsfiddle尝试过

解决方法

为了扩展悬停的底边界，可以使用transform：scaleX'(); ( mdn reference)，并在悬停状态下将其从0转换为1。

边框和转换设置在伪元素上，以防止文本转换，并避免添加标记。
要从左侧或右侧展开底部边框，您可以将transform-origin property更改为伪元素的左侧或右侧：

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行在悬停上展开底部边框

当文本跨越2行时，可以实现此效果。以前的伪元素绝对定位为使第一行的下划线为底部：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>

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

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>

css – 在悬停上展开底部边框

解决方法

猜你在找的CSS相关文章