Is it possible to add a hover effect on the pseudo element "after" itself?

Question

I know I can add a hover effect on the real element that could, potentially, change the after pseudo element, but I need the after pseudo-element background to change when I hover on the after pseudo-element itself.

This is my card, and I would like that when I hover on the "check it out" pseudo-element, its background would change and get a shadow. I don't know if it's possible though because this line of CSS seems to have no effect:

.card::after:hover {
  filter: drop-shadow(30px 10px 4px #4444dd);
  background-color: red;
}

.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 {
  opacity: 0;
  content: "Check it out";
  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);
}

.card:hover::after {
  opacity: 1;
}

.card::after: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%;
}

<div class="card">
                <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=""
                  />
                </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>
        

Answer 1

From what I know, I don't think it's possible this way: after is a pseudo element, pseudo means, not a real DOM element.

What I would suggest is using you already have relative, absolute positioning in your element. Make your check it out a real element absolute position, and a css on hover on card which acts on check it out

.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-checkout {
  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);
}

.card:hover .card-checkout {
  opacity: 1;
}

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

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

.card-checkout:hover {
  filter: drop-shadow(30px 10px 4px #4444dd);
  background-color: red;
}

<div class="card">
  <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="" />
  </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 class="card-checkout">
    Check it out
  </div>
</div>