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

【问题标题】：How do I "shift" the position of h1 tag when using before pseudo element?在伪元素之前使用时如何“移动”h1标签的位置？
【发布时间】：2019-06-21 06:10:52
【问题描述】：

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

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

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

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

【问题讨论】：

为什么是伪元素？为 h1 提供填充并在填充创建的区域中添加背景图像
请在问题中包含minimal reproducible example。链接烂了。
保持内联块，删除位置，如有必要重置垂直对齐codepen.io/anon/pen/XLpPYN
@G-Cyr 成功了。谢谢！

标签： html css

【解决方案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;
}

【讨论】：

我个人更喜欢这个而不是 flexbox，因为它只影响伪元素，而不影响 H1。
@evolutionxbox 相同