伪class ::after 不适用于 img 元素

Question

我试图在我悬停它们时为我的 div 和 img 元素提供伪 class ::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">

Answer 1

遗憾的是，图像不支持像 ::after 或 ::before 这样的伪元素。最简单的解决方案是将图像包裹在 div 中，然后将 class 赋给 div。像这样

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

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

伪class ::after 不适用于 img 元素

Pseudo-class ::after doesn't work on img element

html

css

pseudo-class