在偽元素之前使用時，如何“移動” h1標簽的位置？

Question

我想在每個h1元素的左側顯示一個圖像。 我正在嘗試使用before偽元素。

問題在於，由於沒有內容，因此before偽元素將顯示在h1元素的頂部。 如何“移動” h1元素，使其始終顯示在before偽元素旁邊？

這是筆： https : //codepen.io/saifalfalah/pen/qzRMjj

是否有更好的方法來代替偽元素？

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