Adjustable image using before and after - html

Question

I've got a li and applied "before" on it and put an image inside that.It's fine but the image size doesn't change when zooming in and zoom out maybe that's because of "position: absolute".
And it is also not responsive should I use media query for that?
The current code is:
.abc {
border: 1px solid black;
width: 25%;
height: 130px;
}
.abc::before {
width: 120px;
content: " ";
background-image: url(arr1.png);
background-size: 70% 70%;
background-position: 0%;
background-repeat: no-repeat;
position: absolute;
left: 36%;
top: 52%;
height: 11%;
}
<ul>
<li class="abc">
<p>Heading Item</p>
</li>
</ul>

Answer 1

Based on your code, you don't have a "div" u have <li> with abc class which set a background image on it. also it's not clear what you really want to achieve, but if you want to have a responsive image, this is not the way.
I suggest to take a look at bootstrap documentation, which can be the easiest way for make anything responsive .
take a look at this example for responsive images :
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
https://jsfiddle.net/emilvr/9L5cqnn1/
Update :
For make your images flexible base on browser screen size, add this calss to your images
.flexible-img {
max-width: 100%;
width: auto\9;
height: auto;
}