Does before not work on img elements

Question

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    lt a href   url   class  container  gt     lt span class  overlay   gt     lt img width  200  src   url    gt   lt  a gt    but this does not    lt a href   url   class  container  gt     lt img width  200  src   url   class  overlay   gt   lt  a gt    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

User · Answer

Due to the nature of  lt img gt  being a replaced element  document styling doesn   t affected it   To reference it anyway   lt picture gt  provides an ideal  native wrapper that can have pseudo-elements attached to it  like so    x000D   x000D  img after  picture after  x000D      content   1F63B   x000D      font-size larger  x000D      margin -1em  x000D    x000D   lt img src    placekitten com 110 80  gt  x000D   x000D   lt picture gt  x000D       lt img src    placekitten com 110 80  gt  x000D   lt  picture gt  x000D   x000D   x000D

User · Answer

Try   after on previous element

User · Answer

Here s another solution using a div container for img while using  hover  after to achieve the effect    The HTML as follows     lt div id img container gt  lt img src    style  height 300px  width 300px   gt  lt  img gt  lt  div gt    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

User · Answer

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   lt img src         gt            Edit   For the reason why this isn t supported  check out coreyward s answer

User · Answer

Just give the Image  quot position  relative quot  and it will work

User · Answer

This one works for me     html   lt ul gt       lt li gt  name here  lt  li gt   lt  ul gt    CSS  ul li  before       content  url    images check png

User · Answer

The pseudo-elements generated by   before and   after are contained by the element s formatting box  and thus don t apply to replaced elements such as img  or to br elements   https   developer mozilla org en-US docs Web CSS   after

User · Answer

I think the best way to look at why this doesn t work is that  before and  after insert their content before or after the content within the tag you re applying them to  So it works with divs or spans  or most other tags  because you can put content inside them    lt div gt   before Content  after  lt  div gt    However  an img is a self-contained  self-closing tag  and since it has no separate closing tag  you can t put anything inside of it   That would need to look like  lt img gt Content lt  img gt   but of course that doesn t work    I know this is an old topic  but it pops up first on Google  so hopefully this will help others learn

User · Answer

after may be used to display the fallback image of an image    See the example below  first 2 img tags are point to the broken urls  But the second one displays the fallback image instead of the default broken logo from the browser  However  I m not sure this s any practical  I find it kind of tricky to get it to work right    x000D   x000D  img   x000D    position  relative  x000D    display  inline-block  x000D    width  300px  x000D    height  200px  x000D    vertical-align  top  x000D    x000D  img not  first-child   after   x000D    position  absolute  x000D    left  0  top  0  right  0  bottom  0  x000D    content    lt   attr alt    gt  NOT FOUND   x000D    border  1px dashed  999  x000D    background  url https   cdn dribbble com users 1012566 screenshots 4187820 topic-2 jpg  center 100   x000D    x000D   lt img src  https   source unsplash com random 100 75  alt  logo  gt  x000D   lt img src  https   source unsplash com random 100 75  alt  logo  gt  x000D   lt img src  https   source unsplash com random 100x75  alt  logo  gt  x000D   x000D   x000D

User · Answer

Try this code   button after       content         position  absolute     width  70px     background-image  url        images frontapp mid-icon svg       display  inline-block     background-size  contain     background-repeat  no-repeat     right  0     bottom  0

User · Answer

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  lt br gt  and  lt hr gt  for the same reason

User · Answer

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  amp  Snippet   x000D   x000D  img   x000D         hide the default image    x000D      height 0  x000D      width 0  x000D   x000D         hide fake content    x000D      font-size 0  x000D      color transparent  x000D   x000D         enable absolute position for pseudo elements    x000D      position relative  x000D   x000D         and this is just fake content    x000D      content  I m just fake content   x000D    x000D   x000D     initial absolute position    x000D  img before  x000D  img after   x000D      position absolute  x000D      top 0  x000D      left 0      x000D    x000D   x000D     img before - chrome  amp  others    x000D  img before   x000D      content url http   placekitten com g 250 250   x000D    x000D   x000D     img before - firefox    x000D  body not  -moz-handler-blocked  img before   x000D      padding 125px  x000D      background url http   placekitten com g 250 250  no-repeat  x000D    x000D   x000D     img after    x000D  img after   x000D         width of img before    x000D      left 250px  x000D   x000D      content url http   lorempixel com 350 200 city 1   x000D    x000D   lt img x000D      alt  You are watching the   I m just fake content   method    x000D    gt  x000D   x000D   x000D    Browser support    10003  Chrome 10     10003  Firefox 11     10003  Opera 9 8     10003  Safari  No support    8855  Internet Explorer 8   9  Please test in other browsers

User · Answer

I tried and found a simpler method to do so  Here is the HTML        lt img id  message icon  src  messages2 png  gt       lt p id  empty para  gt  lt  p gt    What I did was place an empty  lt p gt  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

[html] Does :before not work on img elements?

Examples related to html

Examples related to css