Hello everyone, such a question
There is a button:
<a href="#" class="control">blahblahblah</a> .control { line-height: 40px; color: black; font-size: 18px; font-weight: 700; text-align: center; width: 207px; border-radius: 20px; background-color: #fcef02; position: relative; display: block; &:after { content: ""; position: absolute; left: 0; top: 3px; width: 100%; height: 100%; box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.45); transition: all 0.3s cubic-bezier(0.17, 0.84, 0.84, 1.09); border-radius: 20px; background-color: #9b9b00; z-index: -1; } &:hover { box-shadow: 0 0 8px 3px rgba(155, 155, 155, 0.45); } } https://codepen.io/SkipTyler/pen/bjXYWQ
For some reason, after I move it transform: translateX(-200%) lower part, that the pseudo-element, becomes higher than the button, and no z-index helps.
There is no such thing on codepen, but on the site for some reason it is (questionnaire slider)
http://arch-nix.000webhostapp.com/kri/
