:after in a element unexpected result

Question

I have this css:

section#single-result > div > div.horizontal-scroll > div img { height: 200px; margin-right: 4px; position: relative; }

and layout is more or less like this:

<div class="horizontal-scroll">
     <div>
         <img alt="" src="path.jpg">
             <img alt="" src="path.jpg">
             <img alt="" src="path.jpg">
     </div>
</div>

The thing is that i would like to an arrow on top of the first image, so I am trying with the after pseudo element

section#single-result > div > div.horizontal-scroll > div img:first-child:after {
    background: none repeat scroll 0 0 red;
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:9999;
}

but this won't even show a red block on top of it,

any idea what am i missing? is that :after with img don't work as expected?

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

:before and :after pseudo-elements Can not be used IMG Tag, input tag

MOre info

You cannot use :before or :after on img in CSS

edited May 23 '17 at 12:29

Community

1
1

answered Jul 23 '13 at 08:49

Rohit Azad Malik

31,410
17
69
97

:after in a element unexpected result

1 Answers1