Does :before not work on img elements?

问题:

I'm trying to use the :before selector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an img element, only some other element. Specifically, my styles are:

.container {    position: relative;    display: block; }  .overlay:before {     content: url(images/[someimage].png);     position: absolute;     left:-20px;     top: -20px; } 

and I find that this works fine:

but this does not:

I can use a div or p element instead of that span, and the browser correctly overlays my image over the image in the img element, but if I apply the overlay class to the img itself, it doesn't work.

I'd like to get this working because that extra span offends me, but more importantly, I've got about 100 blog posts that I'd like to modify, and I can do this in one go if I could just modify the stylesheet, but if I have to go back and add an extra span element in between the a and img elements, this will be a lot more work.

回答1:

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('');  }); 

Edit:

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

回答2:

img:before or img:after will do you any good. This is also the case for elements like
and

---

for the same reason.

回答3:

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

HTML

CSS

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

Browser support

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

No support

⊗ Internet Explorer 8 / 9

Please test in other browsers

回答4:

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

The HTML as follows:

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'.

回答5:

I tried and found a simpler method to do so. Here is the HTML:

What I did was place an empty

tag after my image tag. Now I will use p::before to show the image and position it according to my needs. Here is the CSS:

#empty_para {     display:inline;     font-size:40;     background:orange;     border:2px solid red;     position:relative;     top:-400px;     left:100px; } #empty_para::before {     content: url('messages.png'); } 

Try it.

文章来源: Does :before not work on img elements?