css - 定位的正确方法：在伪元素之前

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：

div.read-more a:before {
  background: url('https://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT;
  content: url('https://i.stack.imgur.com/Icd9n.png');
  /* 21x21 transparent pixels */
  width: 21px;
  height: 21px;
}

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

https://jsfiddle.net/7X7x2/1/

Answer 3

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

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

它有以下可能的值：baseline、sub、super、top、text-top、middle、bottom、text-bottom

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

完整参考：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);
}