CSS :before, :after 和填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14196367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:before, :after and padding
提问by JohnSmith
I have the following css-code:
我有以下 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;
}
Which styles a link that looks like this:
哪种样式的链接看起来像这样：
But when trying to adjust the text in the .readMore in vertical the :before and :after images also get "jumps" down. Which is logical, but is there a solution so it will align better with the "total image"?
但是当尝试垂直调整 .readMore 中的文本时， :before 和 :after 图像也会“跳”下来。这是合乎逻辑的，但是否有解决方案可以更好地与“整体形象”保持一致？
回答by jamesplease
I tend to use absolutepositioning for :before and :after elements. Then you can do whatever you want to the parent without worrying about your pseudoelements going anywhere (unless, of course, you move the element itself).
我倾向于absolute对 :before 和 :after 元素使用定位。然后你可以对父元素做任何你想做的事情，而不必担心你的伪元素会去任何地方（当然，除非你移动元素本身）。
html
html
<div></div>
css
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;
}
This shows how I would lay them out. You can then use any method you want to adjust the position of the text in the parent.
这显示了我将如何布置它们。然后，您可以使用任何想要调整文本在父级中的位置的方法。
The key points of the above code are the following:
上述代码的关键点如下：
- The parent is relatively positioned. This allows us to use absolute positioning on its children, the pseudoelements, to place them in relation to their parent.
- The left and right position of the before and after elements, respectively, is equal to their width if you want the elements to be border-to-border.
- 父级相对定位。这允许我们在其子元素（伪元素）上使用绝对定位，以相对于其父元素放置它们。
- 如果您希望元素为边框到边框，则前后元素的左右位置分别等于它们的宽度。
If you want to center the text in the parent divvertically, and it's just a single line, you can set the line-height equal to the height of the container. View that here. This would be better than 'guessing' the padding to make it vertically centered, if that's what you're going for.
如果您想div垂直居中父级中的文本，并且它只是一行，您可以将 line-height 设置为等于容器的高度。在这里查看。这比“猜测”填充使其垂直居中要好，如果这就是你想要的。
Of course, there are other ways to center the text vertically, too, and accordingly there are lots of SO questions on the subject. Here's just one.
当然，还有其他方法可以使文本垂直居中，因此有很多关于该主题的 SO 问题。这里只有一个。
