带下划线的CSS3过渡
回答:
这是一个非常棘手的问题。
唯一的解决办法我能想出是过渡border-bottom
的:hover
或我其实应该说我过渡border-
bottom,width
并margin-right
让border-bottom
出现,并在同一时间保持,在这种情况下,链接对齐。
很难解释,所以我举了一个简短的例子,它并不完美,看起来有些混乱,但至少可以说明我的意思。:-)
HTML
<a href="#">Link</a><a href="#">Link</a>
的CSS
a { text-decoration: none;
display: inline-block;
border-bottom: 1px solid blue;
margin-right: 39px;
width: 0px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover {
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
border-bottom: 1px solid blue;
width: 30px;
margin-right: 9px;
}
以上是 带下划线的CSS3过渡 的全部内容, 来源链接: utcz.com/qa/434063.html