Does :Before Not Work on Img Elements

Does :before not work on img elements?

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.

CSS :after pseudo element not showing up on img?

As answered in this question.

Using before and after psuedo-elements with the img tag does not work in most browsers, by design.

Image tags are self-closing (<tag />) tags because they contain no content. Since they do not contain any content, no generated content can be appended (::after) or prepended (::before) to the existing content.

The article linked above lists two work-around solutions. The CSS work-around is very hackish in nature, while the jQuery solution is much more elegant, but depends on both Javascript being enabled and the jQuery library being included.

Pseudo-class ::after doesn't work on img element

Images unfortunately don't support pseudo-elements like ::after or ::before. The easiest solution would be to wrap your images inside of a div and just give the class to the div. Like so

<div class="element">
  <img src="https://raw.githubusercontent.com/SAM-dev-pixel/fylo/main/img/illustration-intro.png" alt="" class="element">
</div>

This is also the case for e.g. <input> as these tags can't contain any content.

Why don't :before and :after pseudo elements work with `img` elements?

The spec says...

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

I guess this means they don't work with img elements (for now).

Also see this answer.

Why CSS Pseudo Element not Working in Image

Here is how I would solve it. First you need to give the parent a position: relative in order to move the p tag around in the div

And then give the pseudo-element position absolute to move it around the p tag.

.header__shape {
    position: relative;
}

.header__shape-quote {
    line-height: 1.3;
    font-size: 3rem;
    color: red;
    position: absolute;
    right: 30rem;
    top: 40rem;

}

.header__shape-quote::before {
    font-size: 4rem;
    position: absolute;
    top: -50px;
    left: -60px;
    /* must have for fontawesome */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f10e";
}

Sample Image

and in a different way. And I personally recommend this one. Over the absolute in the above example. But I don't know which is better for you. So I added both

.header__shape {
  position: relative;
}

.header__shape-quote {
  line-height: 1.3;
  font-size: 3rem;
  color: red;
  margin-left: 5rem;
  margin-top: 5rem;
  position: relative;
}

.header__shape-quote::before {
  font-size: 4rem;
  position: absolute;
  top: -50px;
  left: -60px;
  /* must have for fontawesome */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f10e";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<div class="header__shape">
  <img src="https://picsum.photos/600" rose couples class="header__shape-img">
  <p class="header__shape-quote">
    Being someone’s first love may be great, <br> but to be their last is beyond perfect.
  </p>
</div>

:before and :after elements on an img element

:before and :after pseudo-elements cannot be used for void elements, since they specify content to be prepended or appended to the element's actual content, whereas void elements can have no content.

CSS :before and :after not working?

If you want :before and :after to work, you need to give them content, otherwise they don't really 'exist'. The easiest thing to do is, in the css, set content: '' for both pseudoelements.

Using ::after with an image tag?

An img tag can not have child elements. Because img is a void element and its content model never allows it to have contents under any circumstances.

::after creates a pseudo element as the last child of its parent.

So img::after will not work ultimately because the browser will not allow it based on definition.

What you can do is to contain the img in a container and have ::after on the container.

Demo http://jsfiddle.net/x2za91jw/

HTML

<div class="container">
    <img src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg" />
</div>

CSS

.container {
    position: relative;
}
.container::after {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    content:"these are the zoom buttons";
}

Pseudo element background-image does not work

Try this

h3:before{
    background-image: url(https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    height: 110px;
    display: block;
}

Does :Before Not Work on Img Elements