как поставить картинку перед текстом с помощью ::before and ::after
.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;
}
Ответы (1 шт):
Автор решения: BlackStar1991
→ Ссылка
Что-то не так с вашей картинкой. Ну и размеры у блока
.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>