Why does before not work on img elements?

:before is a CSS pseudo-element used to insert content before the content of the selected element. Typically, it is used with the content property to insert text, icons, or other decorative content.

However, the :before pseudo-element does not apply to img elements because img is a replacement element. In HTML, replacement elements refer to elements that are not rendered by CSS but are represented by external resources. The content of an img element is not directly defined by the document but is defined by the external resource specified by its src attribute, such as an image.

CSS pseudo-elements :before and :after are used to add decorative content to an element, but they can only be applied to elements that can contain child content, such as div, span, or text elements. Since img elements have no child content, are self-closing, and their content is defined by external references, they cannot use :before and :after pseudo-elements.

If you want to add decorative elements or additional graphical elements to an image, you can use a container element (such as div) and place the img element inside it. Then, you can apply :before or :after pseudo-elements to this container to add decorative content.

For example, the following HTML and CSS code demonstrates how to add a simple decorative border to an image:

html
<div class="image-container">
  <img src="example.jpg" alt="Image Example" />
</div>

css
.image-container {
  position: relative;
  display: inline-block;
}

.image-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
  pointer-events: none; /* Prevents the pseudo-element from capturing mouse events */
}

In this example, .image-container serves as the parent container for img, and we can use the :before pseudo-element on it to create a border effect that appears around the image. This approach allows developers to add virtual content around the image, such as borders, backgrounds, or other decorative elements, without modifying the original img tag. This technique maintains the clarity and semantic structure of the HTML while providing flexible styling options.

For instance, if you want to add a title or label that appears on hover, you can do the following:

html
<div class="image-wrapper">
  <img src="example.jpg" alt="Image Example" />
</div>

css
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper:before {
  content: "Image Title";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.image-wrapper:hover:before {
  opacity: 1;
}

In the above code, when the user hovers over the image wrapped by .image-wrapper, the content defined in the :before pseudo-element ("Image Title") appears as the title or descriptive text for the image. This method does not affect the img element itself but achieves the effect through the wrapper element and CSS pseudo-elements.

In summary, for replacement elements that cannot directly apply :before and :after pseudo-elements, we can use creative methods, such as wrapper elements or other structural tags, to simulate the desired effect. The benefit is that it does not affect the semantic structure of HTML while maintaining flexibility and extensibility in styling.

This is another solution: using a div container as a wrapper for the img element, and utilizing :hover::after to achieve the effect.

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

css
#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 the actual effect, please check the JSFiddle I created. Just to let you know that this is cross-browser compatible and does not require using "content" properties to trick the code.

The :before and :after pseudo-elements do not insert HTML elements; instead, they insert text before or after the existing content of the target element. Since image elements do not contain text or have descendants, neither img:before nor img:after will be useful to you. For the same reason, elements such as <br> and <hr> also do not support these pseudo-elements.