我想得到一个transition hover effect on border，边界在悬停时扩大.
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号上试过这件了
设置为expand the bottom border on hover时，可以使用transform:scaleX'();(mdn reference)，并在悬停状态下将其从0转换为1.
下面是边框悬停效果的示例:
边框和转换设置在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 100).
当文本跨越两行时，可以实现这种效果.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>重点是在悬停状态下将变换原点位置从一侧更改为另一侧.这样，当元素不再悬停时，底部波达enters from one side on hover and exits on the other
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>