Question

I'm trying to become more comfortable with CSS styling and while making a test site, I ran into some behavior with an anchor tag and a transition that I can't seem to change. I added padding to the link and when clicked, I want to increase the padding on the bottom and have the text move down with the bottom border. While the padding does increase when the tag is active, the text stays put instead of moving down during the transition.

After reading through some posts I've found（还有更多），似乎一般的想法是添加relative或absolute定位在锚标记上，并将包含div的display属性设置为table-cell或将bottom属性设置为0.这些解决方案不起作用我假设因为我我没有改变高度，但我正在改变填充。

一个小例子

.SiteButtons a {
  transition: padding 0.3s ease;
  padding-bottom: 6px;
  border: 1px solid #555;
}

.SiteButtons a:active {
  padding-bottom: 20px;
}

<div class="SiteButtons">
  <a href="#">Home</a>
</div>

这是我可以做的事情吗？

Answer 1

调整后的CSS：

.SiteButtons {
    display: flex;
}

.SiteButtons a {
    transition: padding 0.3s ease;
    padding-bottom: 6px;
    border: 1px solid #555;
}

.SiteButtons a:active {
    padding-top: 20px;
    padding-bottom: 0;
}

DEMO：http://jsfiddle.net/xfdpxedf/1/

有<a> text move down during CSS padding transition

1 个答案: