我有以下 CSS 代码:
.readMore:before {
content: '';
display: block;
float: left;
width: 10px;
height: 27px;
margin: 0;
background: red url('images/button.png');
background-position: 0 0;
}
.readMore {
float: left;
height: 24px;
background: url('images/button.png');
background-position: -10px 0;
border: 0;
margin: 0;
padding: 4px 0 0 0;
cursor: pointer:
}
.readMore:after {
content: '';
display: block;
float: right;
width: 10px;
height: 27px;
margin: 0;
top: -3px;
background: red url('images/button.png');
background-position: -411px 0;
}
哪个样式的链接看起来像这样:
但是,当尝试垂直调整 .readMore 中的文本时,:before 和 :after 图像也会“跳跃”向下。这是合乎逻辑的,但是否有解决方案,使其更符合“整体形象”?
最佳答案
我倾向于对:before 和:after 元素使用绝对 定位。然后你可以对父元素做任何你想做的事,而不用担心你的伪元素会移动到任何地方(当然,除非你移动元素本身)。
HTML
<div></div>
CSS
div {
position: relative;
background: #eee;
width: 25px;
height: 25px;
margin: 30px 0 0 30px;
}
div:before {
position: absolute;
width: 10px;
height: 25px;
top: 0;
left: -10px;
content:"";
background: #222;
}
div:after {
position: absolute;
width: 10px;
height: 25px;
top: 0;
right: -10px;
content:"";
background: #222;
}
这显示了我将如何布置它们。然后,您可以使用任何您想要的方法来调整文本在父级中的位置。
上述代码的关键点如下:
- parent 相对定位。这允许我们对其子元素(伪元素)使用绝对定位,以将它们放置在相对于父元素的位置。
- 如果您希望元素是边框到边框的,则前后元素的左右位置分别等于它们的宽度。
如果你想让父级 div
中的文本垂直居中,而且它只是一行,你可以将 line-height 设置为等于容器的高度。 View that here .这比“猜测”填充以使其垂直居中要好,如果这是您想要的。
当然,还有其他方法可以使文本垂直居中,因此也有很多关于这个主题的 SO 问题。 Here's just one .
关于css - :before, :填充之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14196367/