:after not firing on :focus on input?

Question

CMS

.wpcf7-form-control-wrap:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0%;
    position: absolute;
    bottom: -12px;
    left: 7px;
  background: transparent;
  transition: width .8s ease-in-out, background-color .8s ease-in-out;
}
.wpcf7-form-control-wrap:focus:after {
  width: 100%;
  background: #fec900;
}

I click on the form window, and for some reason it does not pop up.
Everything seems to be correct in this code.
this style is given by inputu.
Without a pseudo-class, it appears as soon as I remove the width, put it on focus, fucking does not appear
relative is set.

Answer 1

after input