# Make the ::after pseudo-element responsive

**URL:** https://forum.kirupa.com/t/make-the-after-pseudo-element-responsive/651209
**Category:** web dev
**Created:** [March 20, 2022, 9:00pm UTC](https://forum.kirupa.com/t/make-the-after-pseudo-element-responsive/651209 "2022-03-20T21:00:40Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)
#### Post date: [March 20, 2022, 9:00pm UTC](https://forum.kirupa.com/t/make-the-after-pseudo-element-responsive/651209/1 "2022-03-20T21:00:40Z")

</div>

Hi. Hope you are fine.

I have a question for you.  
I’m trying to make a pseudo-element (::after) responsive.  
I just want to show another picture on mobile version.  
But it has a very strange behaviour, which doesn’t allow it to work.  
Actually, it adds brackets.

```auto
  &::after[] {
            content: url('./../../img/home/mobile.png');       
            }

```

Please, see the attached screenshots (CSS and SCSS).

 ![02](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/e/8/e80b7f18c62f29423e168028e6f38c9a2930855e.png)

Why does it happen? Is something wrong with my code?

Thank you very much in advance,  
Helena

---

<div class="post-metadata">

### Author: ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [March 21, 2022, 1:24am UTC](https://forum.kirupa.com/t/make-the-after-pseudo-element-responsive/651209/2 "2022-03-21T01:24:48Z")

</div>

Hi Helena,

IDK why your text formatter is adding the brackets but in CSS` []` is and attribute selector…  
e.g. `a[title = 'example'] { color: purple;}`  
(any anchor tag with` title = 'example'` attribute)

So… having a blank `::after[]` will not match anything at all. (CSS identifier expected).

Also your url file path looks incorrect.  
Usually you use two dots `../` to indicate:

- go up to the parent folder of the current folder
- follow the path down

For example lets say your current path is `"/website/pages/index.html"`…  
then `"../images/picture.png"` is equivalent to `"website/images/picture.png"`

If making those change doesn’t work try to debug it by:

- check `@media` works by adding `body{ background-color: red;}`
- check` @media -> ::after` works with:  
` .img_negative_picture::after{ background-color: red;}}`
- add another picture to the same folder as your current page and check your url

If you have any dramas jump back on…

---

<div class="post-metadata">

### Author: ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)
#### Post date: [March 27, 2022, 1:14pm UTC](https://forum.kirupa.com/t/make-the-after-pseudo-element-responsive/651209/3 "2022-03-27T13:14:58Z")

</div>

Hi, @steve.mills . Thank you very much for your answer.

I tried all your suggestions, nothing helped.

But, I’ve found what was wrong. Usually, when we are writing media-queries, we just write the parameters that will be different on mobile/tablet. But, in this case, I had to write “position:relative;” once again for the parent-element, even it was written already. So, I had to write it twice, even if it doesn’t change on mobile/tablet. Once, it was done, it does work perfectly.

Thank you very much for your help.