How to implement pseudo-element background overlay of the background of the parent, but not the text of the content of the parent block?

Question

css

In the essence of the question, it was not very clear at first glance.
Here is the link to the codepen.
https://codepen.io/alexeeey_kuznetsov/pen/EzXvRp
The problem is: I saw an interesting animation with hover and a pseudo-element.
I decided to try it myself: it was impossible to overlay the desired color with hover, and the search method in the lines of code realized that if the parent, in my case .btn, has an initial background of some color, then when hovering, the pseudo-element will not be able to cover the parent with its background which is exactly what I need.
I hope I explained clearly.
Thanks in advance for your reply!

Answer 1

It? https://codepen.io/anon/pen/LoLrqN

Answer 2

You need to additionally wrap the content of the block (text) in a <div>, then you will get the following layers:

• parent block with background
  
• parent block pseudo-element with its own background
  
• text that you additionally wrapped