В примере не видно разметки, поэтому сразу стоит оговорить, ::before
и ::after
есть только у парных тегов. У img, input и прочих они не будут работать.
content: "../img/services_ball.png";
— Ваша ошибка здесь. В content
обычно записывается текст. И CSS не может узнать, что переданный текст вдруг оказался картинкой. Для этого ему нужно прямо указать об этом, через:
content: url('../img/services_ball.png');
Минусы такого варианта:
- Нельзя менять размеры картинки,
- В content можно было бы прописать дополнительный текст поверх картинки, но он уже занят картинкой.
• background-image: url("my-img.png")
— Поэтому, можно задать псевдоэлементу конкретные размеры и разместить картинку как фон:
.bubu {
position: relative;
/* Это важно, если псевдоэлемент нужно позиционировать относительно этого блока */
width: 100px;
height: 100px;
background: orange;
}
.bubu::after {
content: "";
/* В любом случае необходим, даже пустой. Иначе не будет работать */
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-image: url('https://i.imgur.com/MJekAr4.gif');
background-size: 100px 100px;
box-shadow: 1px 1px 5px #000;
}
<div class="bubu"> </div>
• content: url("my-img.png")
.bubu {
position: relative;
width: 100px;
height: 100px;
background: orange;
}
.bubu::after {
content: url('https://i.imgur.com/MJekAr4.gif');
position: absolute;
left: 50px;
top: 50px;
box-shadow: 1px 1px 5px #000;
}
<div class="bubu"> </div>