Не срабатывает :after при :focus в input?

.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;
}

Нажимаю на окно формы, и почему-то не выплывает.
В данном коде вроде бы всё правильно.
данный стиль задан inputu.
Без псевдокласса появляется, как только убираю ширину, выставляю на фокус, нихера не появляется
relative задан.