html - Does :before not work on img elements?

ID : 10349

viewed : 7

Tags : htmlcsshtml

Top 5 Answer for html - Does :before not work on img elements?

vote vote

99

Unfortunately, most browsers do not support using :after or :before on img tags.

http://lildude.co.uk/after-css-property-for-img-tag

However, it IS possible for you to accomplish what you need with JavaScript/jQuery. Check out this fiddle:

http://jsfiddle.net/xixonia/ahnGT/

$(function() {      $('.target').after('<img src="..." />');  }); 

Edit:

For the reason why this isn't supported, check out coreyward's answer.

vote vote

90

The before and after pseudo-selectors don't insert HTML elements — they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither img:before or img:after will do you any good. This is also the case for elements like <br> and <hr> for the same reason.

vote vote

76

I found a way to make this work in pure css:

The I'm just fake content-method

a pure CSS method to enable img:after.

You can check out the CodePen: I'm just fake content or see the source.

Source & Snippet

img {      /* hide the default image */      height:0;      width:0;        /* hide fake content */      font-size:0;      color:transparent;        /* enable absolute position for pseudo elements */      position:relative;        /* and this is just fake content */      content:"I'm just fake content";  }    /* initial absolute position */  img:before,  img:after {      position:absolute;      top:0;      left:0;      }    /* img:before - chrome & others */  img:before {      content:url(http://placekitten.com/g/250/250);  }    /* img:before - firefox */  body:not(:-moz-handler-blocked) img:before {      padding:125px;      background:url(http://placekitten.com/g/250/250) no-repeat;  }    /* img:after */  img:after {      /* width of img:before */      left:250px;        content:url(http://lorempixel.com/350/200/city/1);  }
<img      alt="You are watching the ~ I'm just fake content ~ method"    />

Browser support

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

No support

⊗ Internet Explorer 8 / 9

Please test in other browsers

vote vote

68

Due to the nature of <img> being a replaced element, document styling doesn’t affected it.

To reference it anyway, <picture> provides an ideal, native wrapper that can have pseudo-elements attached to it, like so:

img::after, picture::after{     content:"\1F63B";     font-size:larger;     margin:-1em; }
<img src="//placekitten.com/110/80">  <picture>     <img src="//placekitten.com/110/80"> </picture>

vote vote

56

Here's another solution using a div container for img while using :hover::after to achieve the effect.

The HTML as follows:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div> 

The CSS as follows:

#img_container {      margin:0;      position:relative;  }   #img_container:hover::after {      content:'';      display:block;      position:absolute;      width:300px;      height:300px;      background:url('');      z-index:1;      top:0; }  

To see it in action, check out the fiddle I've created. Just so you know this is cross browser friendly and there's no need to trick the code with 'fake content'.

Top 3 video Explaining html - Does :before not work on img elements?

Related QUESTION?