How to add :hover or :active to contents created using ::after or ::before

Question

Is it possible to add :hover to ::after or ::before elements?

I've tried it in multiple ways but it's not working, is there another workaround for it.

"I've tried it in multiple ways" - could you just add a snippet of something you have tried? We could go from there to see what the problem is. Better yet, provide a code snippet. — Jakub Kotrs, Apr 02 '22 at 17:54

score 1 · Accepted Answer · answered Apr 02 '22 at 18:01

Coincidentally, I just used this snippet for the hover::after demo.

The button shadow is using button::after, but whenever a user hovers on that button (button:hover::after), the button shadow needs to be reset to position (0,0) for matching with the original button layer.

body {
  background-color: black;
}

button {
 position: relative;

  color: black;
  font-size: 1.625rem;

  background-color: yellow;
  border: 1px solid white;

  padding: 15px 50px;

  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  background-color: transparent;
  transform: translate(0.8rem, 0.8rem);
  color: white;
}
button:hover::after {
  content: "";
  left: 0;
  top: 0;
}

button::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;

  width: 100%;
  height: 100%;

  background: transparent;
  border: 1px solid white;

  transition: all 0.2s;

  z-index: -1;
}

<button>
BUY 
</button>

If it's still not working for you, you need to check content attribute is used in pseudo styles or not. If it's not there, no pseudo styles will be applied.

How to add :hover or :active to contents created using ::after or ::before

1 Answers1