为什么:hover触发的::after伪元素在div上生效但在img上不生效

问题原因 #

<img> 属于替换元素，这类元素（还包括 <input>、<video> 等）的内容为外部加载的资源，本身没有内部内容节点，而 ::before/::after 伪元素的本质是插入到元素内部内容的前后位置，所以替换元素本身无法生成伪元素，这就是img应用类名后hover效果不生效的核心原因。

解决方法 #

方案1：给img套外层容器（推荐，100%还原需求效果） #

调整HTML结构，给每个img外层包裹和原有div结构一致的容器，把样式类加在父容器上即可：

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div">
  <img src="" alt="">
</div>
<div class="div">
  <img src="" alt="">
</div>
<div class="div">
  <img src="" alt="">
</div>
<div class="div">
  <img src="" alt="">
</div>

仅需补充少量img适配样式，原有CSS无需修改：

.div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

方案2：无需修改结构的替代实现 #

如果不想调整HTML结构，可以直接把hover效果写在img自身，不需要依赖伪元素即可实现近似效果：

/* 新增img hover样式 */
img.div:hover {
  box-shadow: inset 0 0 0 2px orange; /* 模拟内边框效果 */
  filter: brightness(1.3); /* 模拟半透明白色遮罩的提亮效果 */
}

内容的提问来源于stack exchange，提问作者Sham