Adjustable image using before and after

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;       
}