伪类 ::after 不适用于 img 元素 [重复]答案

【问题标题】：Pseudo-class ::after doesn't work on img element [duplicate]伪类 ::after 不适用于 img 元素 [重复]
【发布时间】：2022-01-02 02:00:09
【问题描述】：

当我将它们悬停时，我试图给我的 div 和 img 元素伪类 ::after，但它只适用于 div 元素。它不适用于 img 元素有什么解决办法吗？

.element {
  margin: auto;
  max-width: 5.2rem;
  height: 5rem;
  border-radius: .75rem;
  margin-top: .75rem;
  position: relative;
  background: red;
}

.element:hover::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  z-index: 7;
  border: 2px solid orange;
}

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

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

【问题讨论】：

标签： html css pseudo-class

【解决方案1】：

不幸的是，图像不支持 ::after 或 ::before 之类的伪元素。最简单的解决方案是将图像包装在 div 中，然后将类赋予 div。像这样

<div class="element">
  <img src="https://raw.githubusercontent.com/SAM-dev-pixel/fylo/main/img/illustration-intro.png" alt="" class="element">
</div>

例如，情况也是如此。 <input> 因为这些标签不能包含任何内容。

【讨论】：

所以不能给 img 元素 ::after 或 ::before
没错