能否为:after伪元素自身添加hover悬停效果？

你无法直接给伪元素（比如::after）添加hover效果，因为伪元素不属于DOM树的一部分，CSS不支持直接针对伪元素的:hover选择器，所以.card::after:hover这个写法是无效的，这就是你的样式不生效的原因。

可靠解决方案：用真实DOM元素替代伪元素 #

最兼容且简单的方法是把伪元素替换成一个真实的HTML元素，这样就能直接给它添加hover效果了：

1. 修改HTML：在.card容器内添加一个<span>元素用于显示"Check it out"：

<div class="card">
  <span class="check-it-out">Check it out</span>
  <div class="article-img-container">
    <img class="article-img" src="https://files.refurbed.com/ii/apple-watch-series-6-alu-40mm-1613627678.jpg?t=resize&h=600&w=800" alt="Smart Watch S6">
  </div>
  <div class="article-info-container">
    <p class="article-title">Smart Watch S6</p>
    <p class="article-price clr-primary">€ 266.99</p>
  </div>
  <button class="btn btn-card">ORDER NOW</button>
</div>

2. 调整CSS：把原来针对::after的样式转移到新的.check-it-out类上，并添加hover效果：

.card {
  --fs-card: 1.2rem;
  background-color: var(--clr-light);
  width: 200px;
  height: 90%;
  max-height: 31.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  box-shadow: 3px 3px 8px rgb(0, 0, 0);
  overflow: hidden;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.card:hover {
  transform: scale(1.05);
}

/* 替换原有的.card::after样式 */
.check-it-out {
  opacity: 0;
  font-family: "Myriad pro";
  font-size: 1.2rem;
  position: absolute;
  z-index: 3;
  left: 3px;
  top: 3px;
  background-color: #0c44ddd2;
  color: var(--clr-light);
  border-radius: var(--btn-border-radius);
  padding: 0.1rem 0.6rem;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  cursor: pointer; /* 提示用户这是可交互元素 */
}

.card:hover .check-it-out {
  opacity: 1;
}

/* 现在可以直接给这个元素添加hover效果 */
.check-it-out:hover {
  filter: drop-shadow(30px 10px 4px #4444dd);
  background-color: red;
}

.article-img-container {
  height: 60%;
  width: 100%;
  background-color: white;
}

.article-img {
  object-fit: contain;
  object-position: center;
  height: 100%;
  width: 100%;
}

这样修改后，只有当鼠标悬停在"Check it out"文本上时，才会触发背景变红和添加阴影的效果，完全符合你的需求。

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