CSS伪类::after在img元素hover状态不生效，请问如何解决？

根本原因 #

<img> 属于替换元素，这类元素的内容由外部资源填充，本身不支持 ::before、::after 伪元素，因此直接给img元素添加伪类样式不会生效。

可行解决方法 #

方案1：外层加包裹容器（最通用，100%还原需求效果）

将img元素放在和div同结构的父容器内，把原本的.element类加在父容器上，原有CSS几乎不需要修改：

1. 修改后的HTML结构

<div class="element">
  <img src="https://raw.githubusercontent.com/SAM-dev-pixel/fylo/main/img/illustration-intro.png" alt="">
</div>
<div class="element">
  <img src="https://raw.githubusercontent.com/SAM-dev-pixel/fylo/main/img/illustration-stay-productive.png" alt="">
</div>
<div class="element">
  <img src="https://raw.githubusercontent.com/SAM-dev-pixel/bookmark-landing-page/main/img/illustration-hero.svg" alt="">
</div>

2. 新增少量CSS适配内部img

/* 在原有CSS基础上新增以下代码即可 */
.element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

这个方案可以兼容你现有的div逻辑，所有需要加hover效果的元素结构统一，维护成本更低。

方案2：无侵入模拟效果（不需要修改HTML结构）

如果不想改动现有HTML结构，可以用CSS内置属性模拟你要的hover效果，不需要伪元素：

/* 替换原有.element:hover::after的样式即可 */
.element:hover {
  box-shadow: inset 0 0 0 2px orange;
  background-image: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6));
  background-blend-mode: overlay;
}

该方案的局限是仅适合简单的遮罩、边框效果，复杂样式的灵活性不如伪元素方案。

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