如何为:hover状态下的::before伪元素添加transition过渡效果？

你现在的问题核心在于伪元素只在hover状态下才被创建——浏览器没办法对一个“突然出现”的元素应用过渡动画，过渡效果要求元素从始至终都存在，只是某个可过渡的属性（比如opacity、background-color）发生变化。

修改后的可行代码 #

CSS 代码

.img{
  color: white;
  height: 400px;
  background-image: url("https://watermark.lovepik.com/photo/20211203/large/lovepik-serious-businessman-picture_501473287.jpg");
  width: 100%;
  background-size: cover;
  background-position: top 35% right 0;
  position: relative;
  float: left;
}

/* 默认让伪元素存在，设置初始透明状态 */
.img::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 88, 0, 0.7);
  opacity: 0; /* 初始完全透明 */
  transition: opacity 0.5s ease; /* 给伪元素的opacity属性加过渡效果 */
}

.img:hover::before{
  opacity: 1; /* 鼠标悬停时完全显示遮罩 */
}

HTML 代码

<div class="img"></div>
<h4>Jon Doe</h4>
<p>Web Developer</p>

额外说明 #

• 也可以不用opacity，通过修改背景色的透明度实现效果：默认设置background: rgba(255, 88, 0, 0)，hover时改为rgba(255, 88, 0, 0.7)，同样需要把transition属性加在.img::before上。
• 过渡时长可以根据需求调整，示例里用的是0.5s，你可以改成自己想要的时间。

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