html - 在伪元素之前使用时如何“移动”h1标签的位置？

Question

h1我想在每个元素的左侧显示一个图像。我正在尝试为此使用before伪元素。

问题是由于没有内容，before伪元素会显示在h1元素的顶部。如何“移动” h1 元素，使其始终出现在before伪元素旁边？

这是笔：https ://codepen.io/saifalfalah/pen/qzRMjj

如果有更好的方法，而不是使用伪元素？

标签： htmlcss

Answer 1

只需摆脱position: absolute和使用display: inline-block可能还有一个小的右边距。

h1::before {
  content: "";
  background: url("http://lorempixel.com/40/40/");
  height: 40px;
  width: 40px;
  display: inline-block;
  margin-right: 10px;
}