При переносе текста в теге Р на новую строку, текст наезжает на элемент ::before, как исправить?

Есть 5ть тегов <p>, перед каждым стоит псевдоэлемент ::before в виде картинки, при уменьшении ширины экрана текст начинает переноситься и на второй строке заезжает под картинку-псевдоэлемент. Сделать отдельно сначала <img> потом <p> это я и сам додумался, но не хочу. Как заставить текст в <p> на второй строке отступать от того же места что и первая строка?
Код такой:

<div class="col-lg-12 rowwrapp6">
            <p>девелопмент ритейл</p>
            <p>управление развитие городов</p>
            <p>еда и развлечения</p>
            <p>торговые пространства покупательские тренды</p>
            <p>технологии образования</p>
      </div>

.rowwrapp6 p:nth-child(1)::before {
    content: url(img/RoundY.png);
    position: relative;
    top: 22px;
    margin-right: 15px;
  }

  .rowwrapp6 p:nth-child(2)::before {
    content: url(img/RoundF.png);
    position: relative;
    top: 22px;
    margin-right: 15px;
  }

  .rowwrapp6 p:nth-child(3)::before {
    content: url(img/RoundB.png);
    position: relative;
    top: 22px;
    margin-right: 15px;
  }

  .rowwrapp6 p:nth-child(4)::before {
    content: url(img/RoundW.png);
    position: relative;
    top: 22px;
    margin-right: 15px;
  }

  .rowwrapp6 p:nth-child(5)::before {
    content: url(img/RoundG.png);
    position: relative;
    top: 22px;
    margin-right: 15px;
  }