Is :before functionality not compatible with img tags?

Question

Is :before functionality not compatible with img tags?

Is there a way to use the :before selector in CSS to overlay an image on top of another image? I have tried implementing it, but it seems that placing an image before an img element doesn't work as expected. Here is the CSS code I am using:

.container
{
   position: relative;
   display: block;
}

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

I have found that this code works when implemented like this:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

However, if I try to implement it like this, it does not work:

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

When I use a div or p element instead of the span, the browser successfully overlays the image over the img element. But applying the overlay class directly to the img itself does not work.

I want to make this work without having to add an extra span element between the a and img elements. It would save me a lot of time since I have many blog posts to update and modifying the stylesheet would be much more efficient than adding additional elements manually.

html css

Answer 1

Answer №1

It's unfortunate that most browsers do not allow the use of :after or :before with img tags.

If you're looking to achieve this effect, you can always turn to JavaScript/jQuery for a solution. Take a look at this demo:

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

$(function() {

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

});

Edit:

To learn more about why this feature isn't supported, read coreyward's explanation.

Answer 2

It's unfortunate that most browsers do not allow the use of :after or :before with img tags.

If you're looking to achieve this effect, you can always turn to JavaScript/jQuery for a solution. Take a look at this demo:

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

$(function() {

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

});

Edit:

To learn more about why this feature isn't supported, read coreyward's explanation.

Answer 3

Answer №2

The pseudo-selectors that come before and after do not add new HTML elements - instead, they add text either before or after the existing content of the selected element. Since image elements do not have text or descendants, using img:before or img:after will not yield any results. This same principle applies to elements like <br> and <hr> for the same reasons.

Answer 4

The pseudo-selectors that come before and after do not add new HTML elements - instead, they add text either before or after the existing content of the selected element. Since image elements do not have text or descendants, using img:before or img:after will not yield any results. This same principle applies to elements like <br> and <hr> for the same reasons.

Answer 5

Answer №3

Discovering a new approach utilizing only CSS:

The Faux Content Technique

An innovative CSS strategy to utilize img:after.

Feel free to explore the CodePen: Faux Content Technique or view the origin.

Origin & Excerpt

img {
    /* concealing the default image */
    height:0;
    width:0;

    /* obscuring fake content */
    font-size:0;
    color:transparent;

    /* permitting absolute position for pseudo elements */
    position:relative;

    /* incorporating fictitious content */
    content:"Faux Content Technique";
}

/* 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 ~ Faux Content Technique ~ method"  
/>

Compatibility with Browsers

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Lack of Support

⊗ Internet Explorer 8 / 9

Please conduct tests on alternate browsers

Answer 6

Discovering a new approach utilizing only CSS:

The Faux Content Technique

An innovative CSS strategy to utilize img:after.

Feel free to explore the CodePen: Faux Content Technique or view the origin.

Origin & Excerpt

img {
    /* concealing the default image */
    height:0;
    width:0;

    /* obscuring fake content */
    font-size:0;
    color:transparent;

    /* permitting absolute position for pseudo elements */
    position:relative;

    /* incorporating fictitious content */
    content:"Faux Content Technique";
}

/* 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 ~ Faux Content Technique ~ method"  
/>

Compatibility with Browsers

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Lack of Support

⊗ Internet Explorer 8 / 9

Please conduct tests on alternate browsers

Answer 7

Answer №4

Since the <img> element is considered a replaced element, it is unaffected by document styling.

To still have some control over it, you can use <picture> as a native wrapper with pseudo-elements attached to it, for example:

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>

Answer 8

Since the <img> element is considered a replaced element, it is unaffected by document styling.

To still have some control over it, you can use <picture> as a native wrapper with pseudo-elements attached to it, for example:

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>

Answer 9

Answer №5

Check out this alternative method using a div container to display an image with a hover effect achieved through :hover::after.

Here is the HTML code snippet:

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

And here's the corresponding CSS code:

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

If you want to see this in action, feel free to visit my JSFiddle demo. The best part is that it works seamlessly across different browsers without any need for workarounds or fake content.

Answer 10

Check out this alternative method using a div container to display an image with a hover effect achieved through :hover::after.

Here is the HTML code snippet:

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

And here's the corresponding CSS code:

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

If you want to see this in action, feel free to visit my JSFiddle demo. The best part is that it works seamlessly across different browsers without any need for workarounds or fake content.

Answer 11

Answer №6

Exploring the reason why this method doesn't function effectively, it is important to understand that :before and :after insert their content prior to or following the content within the designated tag. This functionality seamlessly integrates with divs or spans as they allow for content insertion.

<div>
:before
Content
:after
</div>

Conversely, an img tag operates as a self-contained, self-closing element. Being devoid of a distinct closing tag prohibits any interior content placement (<img>Content</img> simply isn't a viable option).

While this may be an aged discussion point, its Google search ranking makes this explanation potentially beneficial for others encountering similar challenges.

Answer 12

Exploring the reason why this method doesn't function effectively, it is important to understand that :before and :after insert their content prior to or following the content within the designated tag. This functionality seamlessly integrates with divs or spans as they allow for content insertion.

<div>
:before
Content
:after
</div>

Conversely, an img tag operates as a self-contained, self-closing element. Being devoid of a distinct closing tag prohibits any interior content placement (<img>Content</img> simply isn't a viable option).

While this may be an aged discussion point, its Google search ranking makes this explanation potentially beneficial for others encountering similar challenges.

Answer 13

Answer №7

Elements created by ::before and ::after are restricted to the element's styling box and have no effect on replaced elements like images or line break elements.

Learn more about CSS pseudo-elements ::after here

Answer 14

Elements created by ::before and ::after are restricted to the element's styling box and have no effect on replaced elements like images or line break elements.

Learn more about CSS pseudo-elements ::after here

Answer 15

Answer №8

When facing these situations, it is best to utilize the <figure> tag for more efficient CSS management. This allows for easier styling control specifically on the figure element.

For instance,

<div class="example">
  <figure>
    <img src="img1.jpg"/>
  </figure>
  <figure>
    <img src="img2.jpg"/>
  </figure>
</div>

Answer 16

When facing these situations, it is best to utilize the <figure> tag for more efficient CSS management. This allows for easier styling control specifically on the figure element.

For instance,

<div class="example">
  <figure>
    <img src="img1.jpg"/>
  </figure>
  <figure>
    <img src="img2.jpg"/>
  </figure>
</div>

Answer 17

Answer №9

Here is a solution that has been effective for me:

HTML

<ul>
    <li>Enter name here</li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

Answer 18

Here is a solution that has been effective for me:

HTML

<ul>
    <li>Enter name here</li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

Answer 19

Answer №10

::after can be utilized to show the fallback image when an image cannot be displayed

Take a look at the example below, where the first 2 img tags are broken URLs. However, the second one shows the fallback image instead of the default broken logo from the browser. Although this method may not be very practical, it requires some expertise to implement correctly.

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

Answer 20

::after can be utilized to show the fallback image when an image cannot be displayed

Take a look at the example below, where the first 2 img tags are broken URLs. However, the second one shows the fallback image instead of the default broken logo from the browser. Although this method may not be very practical, it requires some expertise to implement correctly.

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

Answer 21

Answer №11

When it comes to the element <img>, it behaves as a replaced element. Utilizing :before or :after pseudo-elements on it will only work if the image fails to load. Otherwise, these pseudo-elements do not function as intended. For a fallback solution in case of image loading failure, you can find more details at https://example.com/a/84329752/98765432

Answer 22

When it comes to the element <img>, it behaves as a replaced element. Utilizing :before or :after pseudo-elements on it will only work if the image fails to load. Otherwise, these pseudo-elements do not function as intended. For a fallback solution in case of image loading failure, you can find more details at https://example.com/a/84329752/98765432

Answer 23

Answer №12

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>

      #image img{
    display: inline-block;
    max-width: 50%;
    }

      #image::after {
    position: absolute;
    top: 0;
    content: url('https://img.icons8.com/plasticine/100/000000/about.png');
    }

    </style>
    <title>img before</title>
  </head>
  <body>
    <a id="image" href="">
    <img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
    </a>
  </body>
</html>

Answer 24

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>

      #image img{
    display: inline-block;
    max-width: 50%;
    }

      #image::after {
    position: absolute;
    top: 0;
    content: url('https://img.icons8.com/plasticine/100/000000/about.png');
    }

    </style>
    <title>img before</title>
  </head>
  <body>
    <a id="image" href="">
    <img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
    </a>
  </body>
</html>

Answer 25

Answer №13

Give this code a shot

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

Answer 26

Give this code a shot

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

Answer 27

Answer №14

I experimented with a different approach and discovered a more streamlined method. Check out the HTML code below:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

Instead of utilizing complicated methods, I simply added an empty <p> tag after my image tag. Now, by using p::before in CSS, I can display the image and adjust its position as needed. Take a look at the CSS snippet:

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

Give it a try.

Answer 28

I experimented with a different approach and discovered a more streamlined method. Check out the HTML code below:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

Instead of utilizing complicated methods, I simply added an empty <p> tag after my image tag. Now, by using p::before in CSS, I can display the image and adjust its position as needed. Take a look at the CSS snippet:

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

Give it a try.

Answer 29

Answer №15

Experiment with ::after on the element before this one.

Answer 30

Experiment with ::after on the element before this one.

Answer 31

Answer №16

To make it work, simply apply the CSS style "position: relative" to the Image

Answer 32

To make it work, simply apply the CSS style "position: relative" to the Image

Is :before functionality not compatible with img tags?

Answer №1

Answer №2

Answer №3

The Faux Content Technique

Origin & Excerpt

Compatibility with Browsers

Lack of Support

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Answer №12

Answer №13

Answer №14

Answer №15

Answer №16

Similar questions

Floating image positioned between two div elements

Strange occurrence with getBoundingClientRect() function and F5 refresh, what could be causing this odd behavior?

Enhance Your Joomla 2.5 Website with Custom CSS Specifically for iPad Viewing

When bootstrap is imported, SVG is displayed with a square background

What purpose does the additional symbol "$()" serve in the selector "$($())"?

Adjust the navigation menu to display or hide as the page is being scrolled

Issue with submitting forms in modal using Bootstrap

Problem encountered with HTML table formatting

if the condition is not met, proceed to the alternate template eventually

PHP - Unable to successfully upload the file

Footer refuses to stay anchored at the bottom of the page

premature submission alert on button press

Add a custom filter to the active route for a stylish look

Disable the full screen camera mode on iOS browsers while live streaming camera video

What is the process of connecting to an Embed object in HTML?

Master the art of filtering rows in an HTML table based on a select option when the mouse is clicked

Attention: validation of DOM nesting encountered an error: element <div> is not permitted to be nested inside <p>

Designing this unique shape using CSS3 to create a sleek drop-down container

CORS policy is preventing access to the XAMPP Server:

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on