css - 正确定位 :before pseudo-elements 的方法

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