我不明白为什么在下面的代码中,链接悬停效果从中间开始,而不是从左到右。有人可以解释为什么会这样吗?
.orange-link {
color: orange;
position: relative;
text-decoration: none;
}
.orange-link:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: orange;
bottom: 0;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
.orange-link:hover:before,
.orange-link:focus:before {
transform: scaleX(1);
}Run Code Online (Sandbox Code Playgroud)
<p>Visit the official rules <a class="orange-link" href="#">here</a> on how to send in a write-in entry.</p>Run Code Online (Sandbox Code Playgroud)