Можно ли поставить иконки рядом с элементами “li”, используя псевдоэлемент “before”?

*{ 
  margin:0; 
  padding:0; 
  list-style:none; 
  text-decoration:none; 
} 
 
li p{ 
  position: relative; 
  width:40px; 
  height:40px; 
  zoom:.5; 
} 
 
li p:after{ 
  content:url(https://www.cyldigital.es/sites/default/files/article/house.jpg ); 
 zoom:.1; 
} 
 
li span{ 
  margin-left:24px; 
  vertical-align:middle; 
} 
li p{ 
  display:inline-block; 
  vertical-align:top; 
}

<ul> 
  <li> 
    <a href="">  
      <p></p> 
      <span>Вернуться домой</span> 
     </a> 
  </li> 
</ul>

ul { 
  border: 1px dotted #00f; 
} 
 
li { 
  list-style-type: none; 
  border: 1px dotted #f00; 
} 
 
li:first-child::before { 
  content: ''; 
  display: inline-block; 
  background: url(http://via.placeholder.com/160x120/ff9999/444444) center center no-repeat; 
  border: 1px dotted #090; 
  background-size: contain; 
  width: 20px; 
  height: 30px; 
} 
li:nth-child(2)::before { 
  content: ''; 
  display: inline-block; 
  background: url(http://via.placeholder.com/160x120/00CED1/444444) center center no-repeat; 
  border: 1px dotted #090; 
  background-size: contain; 
  width: 50px; 
  height: 50px; 
} 
li:nth-child(3)::before { 
  content: ''; 
  display: inline-block; 
  background: url(http://via.placeholder.com/160x120/CE00D1/444444) center center no-repeat; 
  border: 1px dotted #090; 
  background-size: contain; 
  width: 70px; 
  height: 10px; 
} 
li:last-child::before { 
  content: ''; 
  display: inline-block; 
  background: url(http://via.placeholder.com/160x120/CED100/444444) center center no-repeat; 
  border: 1px dotted #090; 
  background-size: contain; 
  width: 160px; 
  height: 40px; 
}

<ul> 
  <li>000</li> 
  <li>111</li> 
  <li>222</li> 
  <li>333</li> 
</ul>