Hover Effect Addon Class Using CSS Only

Question

I am trying to create a reusable hover effect class using only CSS. I am aware that this effect could be achieved in myriad ways if one is willing to use JS or additional markup, but that is not my intention.

At the core of my question, I have discovered that it appears one cannot use pseudo-selectors on pseudo-elements. This is frustrating, since I believe that with the stated functionality, the below snippet should suffice.

.btn-hover-effect {
  position: relative;
}

.btn-hover-effect::before {
  content: "";
  background-color: rgba(0, 0, 0, 0);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.btn-hover-effect::before:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

Answer 1

The hover effect applies on the .btn-hover-effect button so you should link it first.

.btn-hover-effect:hover::before

The thing you did was targeting the pseudo element before hovered, which won't work.

Here's a working test snippet:

.btn-hover-effect {
  position: relative;
}

.btn-hover-effect::before {
  content: "";
  background-color: rgba(0, 0, 0, 0);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.1s ease-in;
}

.btn-hover-effect:hover::before {
  background-color: rgba(0, 0, 0, 0.5);
}

<button class="btn-hover-effect">Hello World</button>