小编ckl*_*n23的帖子

为什么此链接悬停效果从中间开始而不是从左边开始?

我不明白为什么在下面的代码中,链接悬停效果从中间开始,而不是从左到右。有人可以解释为什么会这样吗?

.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)

html css

5
推荐指数
1
解决办法
66
查看次数

标签 统计

css ×1

html ×1