как поставить картинку перед текстом с помощью ::before and ::after

Рейтинг: 0Ответов: 1Опубликовано: 04.03.2023
.phonenum::before {
    content: '';

    background-image: url('images\ring1.jpg');

    background-size: 10px 10px;
}

В css пробовал сделать так,но оно не работает.

html :

<div class="phonenumclass">

  <p class="phonenum">+380 (97) 099-44-41</p>
  <p class="phonenum">+380 (63) 992-96-36</p>

</div>

Хочу сделать гудок перед номером,но ничего не выходит

так же пробовал брать эту же картинку с сайта

и делал таким образом

.phonenum::before {
    content: '';

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAjVBMVEX///8BAAL09PT6+vr19fXu7u7o6Oj7+/vr6+vx8fE5OTnS0tLf398pKCk1NDXCU0htPnTJ3rmfQOcJUIa8PZYzz+eOiPlqP25u2xV+kD8x8gsXtHdSCbewAAAABJRU5ErkJggg==');

    background-size: 100px;
}
css html
Источник: Stack Overflow на русском

Ответы

▲ 0

Что-то не так с вашей картинкой. Ну и размеры у блока

.phonenum {
  max-width: calc(100% - 30px);
}

.phonenum::before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  background: url('https://www.flaticon.com/svg/vstatic/svg/5068/5068731.svg?token=exp=1677948381~hmac=be8805fe62db5eebaecf2240043dc5f4');
  background-size: contain;
}
<div class="phonenumclass">

  <p class="phonenum">+380 (97) 099-44-41</p>
  <p class="phonenum">+380 (63) 992-96-36</p>

</div>