正确的定位方式：在伪元素之前

Question

定位:before和:after伪元素（如图片）的正确方法是什么？我一直在用一堆不同的方式搞乱，但它们似乎都不是非常优雅的解决方案。

这就是我要做的事情：

这就是我所做的：

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>

我基本上只想让图像与文本对齐。还有另一种方法吗？

如果我可以在:before图像上使用填充和边距，那将是完美的，而假设就是你所做的。但由于某种原因，这对我来说并不适用。我可以添加水平填充和边距，但顶部和底部填充不会做任何事情。为什么会这样？

Answer 1

您可以使用以下代码移动内容：

div.read-more a:before {
  content: "\00BB \0020";
  position: relative;
  top: -2px;
}

Answer 2

尝试使用background代替content并在content中添加占位符：http://jsfiddle.net/7X7x2/1/

Answer 3

如果您只想将图像放在文本附近，那么您可能需要vertical -align属性：

div.read-more a:before {
    vertical-align: bottom;
    content: url(image.png);
}

它有以下可能的值：基线，子，超，顶部，文本顶部，中间，底部，文本底部

此值根据当前文本行的文本位置计算得出（在示例中阅读更多内容）。

完整参考：http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

（在文本之前添加空格只使用margin-right）

Answer 4

这是我的解决方案，鼠标悬停：

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);
}

Answer 5

你需要做位置：相对于.read-more然后你可以改变位置。

Answer 6

编辑@Richard JP Le Guen的小提琴因此它与所要求的版本相匹配

HTML

<div class="read-more">
    <a href="#">Read More</a>
</div>

CSS

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;
}

http://jsfiddle.net/7X7x2/688/