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

Question

[iminby]

.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 задан.

Answer 1

[Роман Ямчук]

after у input

Comments

[iminby]

Спасибо, искал, но не попал туда.

Answer 2

[4mobile]

У инпута не может быть :before и :after по спецификации.
Задавайте через label или родительский тег.
И лучше привести полный кусок кода, с html, если хотите получить качественный ответ.
Можно сразу тут https://jsfiddle.net/

Comments

[iminby]

спасибо, в принципе понял