Здесь, желтый фон при фокусе работает нормально.
но здесь не показывает.
CSS:
.user-label::after,
.pass-label::after {
content: '';
position: absolute;
top: 80%;
left: 41%;
width: 180px;
height: 53%;
border-radius: 2px;
transition: transform 1s;
}
.user-label::after,
.pass-label::after {
z-index: -1;
background: yellow; /*beige;*/ /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
Обновлять:
Я удалил запятую в строке 89, но почему желтый фон отображается таким образом при фокусировке?
у вас есть лишняя запятая в строке 89 ".pass-input: focus + .pass-label :: after,"
@ChrisLi Я удалил его, но почему желтый фон отображается так, когда фокусируется?
Я постараюсь изо всех сил объяснить, как работает position: absolute, поэтому, когда вы добавляете height: 50% к элементу с position absolute, высота относительно первого предка с position: relative, в вашем случае его < form>, первый работает нормально, потому что элемент <form> находится на правильной высоте, но у вас есть 2 div, которые делают <form> выше, поэтому элемент after тоже выше.
В коде у вас есть дополнительная запятая после последнего селектора в строке № 89 перед {
@yalpsid - codepen.io/anon/pen/ZMvmzN вот код с несколько фиксированной ситуацией. Сравните CSS и увидите различия, но в основном после установки position: absolute он просматривает дерево вложенных элементов, чтобы найти ближайший элемент с установленным положением (абсолютное, относительное, липкое, фиксированное), и это ссылка на верхний левый , справа, нижняя часть ребенка. Я помещаю позицию относительно метки, чтобы ваши псевдоэлементы after имели ссылку. затем я настроил вашу шкалу, чтобы она соответствовала точно 100%. Лучший совет - не использовать такие точные значения и чтобы многие селекторы
Спасибо......
Я вижу, что на вашем втором CodePen появляются изогнутые подчеркивания. Найдите этот код и добавьте к нему свой желтый фоновый код.