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