CSS 悬停进出时从左到右划下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40242378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Underline from left to right on hover in and out
提问by R M
With the following code I get an hover underline effect from left to right.
使用以下代码，我从左到右获得了悬停下划线效果。
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}<p>hello, link is <a href="#" class="underline">underline</a>
</p>When you're not in hover, the :after element returns to the left, the initial state. Is there any way that the :after goes to the rightand not to the left when you leave the hover?
当您不处于悬停状态时， :after 元素返回左侧，即初始状态。当你离开悬停时，有什么办法可以让:after 向右而不是向左？
回答by Vlad Cazacu
You can try animating the width instead of the right/left properties.
您可以尝试动画宽度而不是右/左属性。
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
right: 0;
width: 0;
bottom: -5px;
background: #000;
height: 4px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
left: 0;
right: auto;
width: 100%;
}<p>hello, link is <a href="#" class="underline">underline</a></p>See this fiddle for a working example: https://jsfiddle.net/1gyksyoa/
有关工作示例，请参阅此小提琴：https: //jsfiddle.net/1gyksyoa/
回答by web-tiki
Based on this answer : Expand bottom border on hoveryou can change the transform-originproperty on hover to achieve the "hover out"
effect you are looking for. Here is an example :
基于此答案：在悬停时展开底部边框，您可以更改悬停时的transform-origin属性以实现您正在寻找的“悬停”效果。这是一个例子：
.expand{
position:relative;
text-decoration:none;
display:inline-block;
}
.expand:after {
display:block;
content: '';
border-bottom: solid 3px #000;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
transform-origin:100% 50%
}
.expand:hover:after {
transform: scaleX(1);
transform-origin:0 50%;
}Here is some dummy text <a href="#" class="expand">expand</a>