CSS 定位 :before 伪元素的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7880053/
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
Proper way to position :before pseudo-elements
提问by Syren
What is the proper way to position :beforeand :afterpseudo-elements, like pictures? I've been messing around with a bunch of different ways, but none of them seem like very elegant solutions.
定位:before和:after伪元素（如图片）的正确方法是什么？我一直在尝试各种不同的方法，但它们似乎都不是非常优雅的解决方案。
This is what I'm trying to do:
这就是我想要做的：
This is what I did:
这就是我所做的：
div.read-more a:before {
content: url('/images/read_more_arrow_sm.png');
position: absolute;
top: 4px;
left: -15px;
}
<div class="read-more">
<a href="#">Read More</a>
</div>
I basically just want the image to be aligned with the text. Is there another way to do that?
我基本上只希望图像与文本对齐。有没有另一种方法可以做到这一点？
It would be perfect if I could just use padding and margins on the :beforeimage, and that is supposedto be what you do. But for some reason, that hasn't been working for me. I can add horizontal padding and margins, but top and bottom padding doesn't do anything. Why would that happen?
如果我可以在:before图像上使用填充和边距，那将是完美的，这应该是你所做的。但出于某种原因，这对我不起作用。我可以添加水平填充和边距，但顶部和底部填充没有任何作用。为什么会这样？
采纳答案by Richard JP Le Guen
Try using backgroundinstead of contentand put a placeholder in content: http://jsfiddle.net/7X7x2/1/
尝试使用background而不是content放置一个占位符content：http: //jsfiddle.net/7X7x2/1/
回答by Ricardo Huertas
You can use the following code in order to move the content:
您可以使用以下代码来移动内容：
div.read-more a:before {
content: "div.read-more a:before {
vertical-align: bottom;
content: url(image.png);
}
BB div.read-more a:before {
content: url(image.png);
position: relative;
top: 3px;
left: -7px;
padding-left: 7px;
}
div.read-more a:hover:before {
content: url(image_hover.png);
}
20";
position: relative;
top: -2px;
}
回答by Alexey Ivanov
If you want only to position image near the text, then you probably need vertical -align property:
如果您只想将图像放置在文本附近，那么您可能需要 vertical -align 属性：
<div class="read-more">
<a href="#">Read More</a>
</div>
It have following possible values: baseline, sub, super, top, text-top, middle, bottom, text-bottom
它有以下可能的值：baseline、sub、super、top、text-top、middle、bottom、text-bottom
This values a calculated from the position of the text from the current text line (Read more in the example).
这个值是根据当前文本行中的文本位置计算得出的（阅读示例中的更多内容）。
Full reference: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
完整参考：http: //www.w3schools.com/cssref/pr_pos_vertical-align.asp
(To add space before text just use margin-right)
（要在文本前添加空格，只需使用 margin-right）
回答by Bas
This was my solution, with a mouseover:
这是我的解决方案，鼠标悬停：
div.read-more a:before {
background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT;
content:"";
width:21px;
height:21px;
display: inline-block;
vertical-align: sub;
margin-right: 4px;
line-height: 21px;
}
div.read-more {
background: red;
line-height: 21px;
display:block;
vertical-align:middle;
width: max-content;
padding: 4px;
}
div.read-more a{
color: white;
text-decoration:none;
}
回答by Bunty
You need to make position: relative to .read-more and then you can change position.
你需要做 position: relative 到 .read-more 然后你可以改变位置。
回答by thebigsmileXD
Edited @Richard JP Le Guen's fiddle so it matches the requested version a little more
编辑@Richard JP Le Guen 的小提琴，使其与请求的版本更加匹配
HTML
HTML
##代码##CSS
CSS
##代码##