:before 是一个CSS伪元素，它用于在选择的元素内容的前面插入一些内容。通常，这个伪元素与 content 属性一起使用，可以插入文本、图标或其他装饰性内容。

然而，:before 伪元素对 img 标签不起作用，原因是 img 标签是一个替换元素（replacement element）。在HTML中，替换元素通常是指那些不是由CSS渲染的内容，而是由外部资源表示的元素。img 元素的内容不是由文档内容直接定义的，而是由它的 src 属性指定的外部资源定义的，比如一张图片。

CSS伪元素 :before 和 :after 是用来为元素的内容添加装饰性内容的，但它们只能应用于那些能够包含子内容的元素，比如 div、span 或者文本元素等。既然 img 元素没有子内容，它是自闭合的标签，并且它的内容是由外部引用定义的，所以是不能使用 :before 和 :after 伪元素的。

如果你想为图片添加装饰或额外的图形元素，你可以使用一个容器元素（比如 div），然后将 img 元素放入该容器内。之后，你可以对这个容器使用 :before 或 :after 伪元素来添加装饰内容。

例如，以下HTML和CSS代码演示了如何给图片添加一个简单的装饰边框：

html
<div class="image-container">
  <img src="example.jpg" alt="示例图片" />
</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; /* 防止伪元素捕获鼠标事件 */
}

在这个例子中，.image-container 就像是 img 的父容器，我们可以在它上面使用 :before 伪元素来创建一个边框效果，而这个边框会显示在图片的周围。这种方法允许开发者在图片周围添加虚拟的内容，比如边框、背景或者其他装饰物，而无需修改原始的 img 标签。这样的技术可以保持HTML结构的清晰和语义化，同时还能提供灵活的样式设计。

例如，如果你想给图片添加一个悬浮时显示的标题或标签，你可以这样做：

html
<div class="image-wrapper">
  <img src="example.jpg" alt="示例图片" />
</div>

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

.image-wrapper:before {
  content: "图片标题";
  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;
}

在上述代码中，当用户将鼠标悬浮在 .image-wrapper 包裹的图片上时，before 伪元素中定义的内容（"图片标题"）就会显示出来，作为图片的标题或者说明文字。这种方法同样不会影响到 img 元素本身，而是通过包裹元素和CSS伪元素来实现效果。

总的来说，对于不能直接应用 :before 和 :after 伪元素的替换元素，我们可以通过创造性的方法，例如使用包裹元素或者其他结构性的标签，来模拟出我们想要的效果。这样做的好处是不会对HTML的语义结构造成影响，同时还能保持样式的灵活性和扩展性。

不幸的是，大多数浏览器不支持在 img 标签上使用:after或。:before

http://lildude.co.uk/after-css-property-for-img-tag

然而，您可以使用 JavaScript/jQuery 来完成您所需要的任务。看看这个小提琴：

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

shell
$(function() {

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

});

编辑：

对于不支持此功能的原因，请查看coreyward 的回答。

before 和 after 伪选择器不插入 HTML 元素 — 它们在目标元素的现有内容之前或之后插入文本。因为图像元素不包含文本或有后代，所以它们都不img:before会对img:after您有任何好处。出于同样的原因，类似<br>和的元素也是如此。<hr>

我找到了一种在纯 css 中实现此功能的方法：

我只是假内容-方法

启用 img:after 的纯 CSS 方法。

你可以查看**CodePen：我只是假内容或者查看来源**。

来源和片段

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

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

运行代码片段Hide results

展开片段

浏览器支持

✓ Chrome 10+

✓ 火狐 11+

✓ 歌剧 9.8+

✓ 野生动物园

没有支持

⊗ Internet Explorer 8 / 9

请在其他浏览器中测试

由于<img>被替换元素的性质，文档样式不会影响它。

无论如何要引用它，<picture>提供一个理想的本机包装器，可以附加伪元素，如下所示：

shell
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>

运行代码片段Hide results

展开片段

这是另一种解决方案，使用 div 容器作为 img，同时使用:hover::after来实现效果。

HTML如下：

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

CSS如下：

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

要查看它的实际效果，请查看我创建的小提琴。只是为了让您知道这是跨浏览器友好的，并且无需使用“虚假内容”来欺骗代码。

:before 是一个CSS伪元素，它用于在选择的元素内容的前面插入一些内容。通常，这个伪元素与 content 属性一起使用，可以插入文本、图标或其他装饰性内容。

然而，:before 伪元素对 img 标签不起作用，原因是 img 标签是一个替换元素（replacement element）。在HTML中，替换元素通常是指那些不是由CSS渲染的内容，而是由外部资源表示的元素。img 元素的内容不是由文档内容直接定义的，而是由它的 src 属性指定的外部资源定义的，比如一张图片。

CSS伪元素 :before 和 :after 是用来为元素的内容添加装饰性内容的，但它们只能应用于那些能够包含子内容的元素，比如 div、span 或者文本元素等。既然 img 元素没有子内容，它是自闭合的标签，并且它的内容是由外部引用定义的，所以是不能使用 :before 和 :after 伪元素的。

如果你想为图片添加装饰或额外的图形元素，你可以使用一个容器元素（比如 div），然后将 img 元素放入该容器内。之后，你可以对这个容器使用 :before 或 :after 伪元素来添加装饰内容。

例如，以下HTML和CSS代码演示了如何给图片添加一个简单的装饰边框：

html
<div class="image-container">
  <img src="example.jpg" alt="示例图片" />
</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; /* 防止伪元素捕获鼠标事件 */
}

在这个例子中，.image-container 就像是 img 的父容器，我们可以在它上面使用 :before 伪元素来创建一个边框效果，而这个边框会显示在图片的周围。 这种方法允许开发者在图片周围添加虚拟的内容，比如边框、背景或者其他装饰物，而无需修改原始的 img 标签。这样的技术可以保持HTML结构的清晰和语义化，同时还能提供灵活的样式设计。

例如，如果你想给图片添加一个悬浮时显示的标题或标签，你可以这样做：

html
<div class="image-wrapper">
  <img src="example.jpg" alt="示例图片" />
</div>

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

.image-wrapper:before {
  content: "图片标题";
  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;
}

在上述代码中，当用户将鼠标悬浮在 .image-wrapper 包裹的图片上时，before 伪元素中定义的内容（"图片标题"）就会显示出来，作为图片的标题或者说明文字。这种方法同样不会影响到 img 元素本身，而是通过包裹元素和CSS伪元素来实现效果。

总的来说，对于不能直接应用 :before 和 :after 伪元素的替换元素，我们可以通过创造性的方法，例如使用包裹元素或者其他结构性的标签，来模拟出我们想要的效果。这样做的好处是不会对HTML的语义结构造成影响，同时还能保持样式的灵活性和扩展性。