如何在:hover状态下修改:before伪元素的内阴影效果？

我检查了你的代码，发现两个关键问题导致hover效果没触发：

1. 颜色值拼写错误
   你在.shadow:hover:before的box-shadow里把rgba误写成了rbga——这个低级拼写错误让浏览器无法识别有效的颜色值，自然不会应用hover状态的样式。

2. （可选）层级优化建议
   虽然你提到初始内阴影已经生效，但要注意：.shadow::before作为父元素的伪元素，默认会在子元素<img>的下方。如果后续出现阴影被图片遮挡的情况，可以给伪元素设置z-index: 1，同时给<img>添加position: relative; z-index: 0，来调整层级关系确保阴影可见。

修正后的完整代码 #

.shadow { 
  position: relative; 
  max-width: 100%; 
  float: left; 
}
.shadow::before { 
  border-radius: 100%; 
  content: ""; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .6); 
  transition: box-shadow .2s ease-in-out;
  /* 可选：确保伪元素在图片上方 */
  z-index: 1;
}
.shadow:hover::before { 
  /* 修正了rgba的拼写错误 */
  box-shadow: inset 5px 5px 55px rgba(0, 0, 0, .8); 
}
.shadow img { 
  float: left; 
  border-radius: 100%; 
  width: 300px; 
  /* 可选：配合伪元素z-index，让图片在下层 */
  position: relative;
  z-index: 0;
}

<div class="shadow"> 
  <img src="https://picsum.photos/300/300?image=1015"> 
</div>

这样修改后，hover状态的内阴影就能正常触发了，你可以测试一下效果~

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