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

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)