Как сверстать стрелочки после li?

Question

[Анатолий Филиппов]

Здравствуйте! Что я совсем туплю страшно...
Вот что мне прислали в макете:

<ul>
            <li>
              <h3>
                <span style="background-image: url('images/icon-1.png')"></span>
                Создание приложения
             </h3>
            </li>
            <li>
              <h3>
                <span style="background-image: url('images/icon-2.png')"></span>
                Наполнение
              </h3>
            </li>
              
            <li>
              <h3>
                <span style="background-image: url('images/icon-3.png')"></span>
                Подключение клиентов
              </h3>
            </li>
          
            <li>
              <h3>
                <span style="background-image: url('images/icon-4.png')"></span>
                Выгода
              </h3>
            </li>
          </ul>

вот код этих блоков. Сложность в том что стрелочки должны быть на равном расстоянии именно от иконок, я пробовал делать фиксированную ширину всего блока li, вставлять еще одним li span эти стрелки, тогда все супер, но тогда получается что текст на большом расстоянии друг от друга. Может сделать какой то вариант через :after ?

https://jsfiddle.net/gv1cvtpk/

вот собственно фидл

Comments

[Роман Григорьев]

Стрелка должна быть символом с клавиатуры или картинкой?

[Анатолий Филиппов]

Роман Григорьев: картинка png

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/dGJgad

Comments

[Анатолий Филиппов]

Как все просто! Спасибо большое!)

Answer 2

[Борис Якушев]

Сделайте через :after иконочным шрифтом.

Comments

[Анатолий Филиппов]

after кого? li, h3, или span?

[Борис Якушев]

Анатолий Филиппов: Я бы для li сделал, и да, писать стили в html — неправильно.
Html для разметки, css для стилей.

Почитайте на досуге, очень удобная штука: https://webref.ru/css/nth-of-type

[Анатолий Филиппов]

Борис Якушев: это не я, это купленный шаблон)) я да, тоже переписывать это стараюсь

[Анатолий Филиппов]

Борис Якушев: в общем li:after, и абсолютно позиционировать content?

[Борис Якушев]

Анатолий Филиппов: можно и так.

Answer 3

[Кирилл]

я такое верстаю ">" с клавиатуры, попробуй, можно картинкой, но главное без фона в png