:: элемент после того, как элемент не отображается при фокусе

Здесь, желтый фон при фокусе работает нормально.

но здесь не показывает.

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, но почему желтый фон отображается таким образом при фокусировке?

Я вижу, что на вашем втором CodePen появляются изогнутые подчеркивания. Найдите этот код и добавьте к нему свой желтый фоновый код.

Jack Bashford 10.09.2018 06:52

у вас есть лишняя запятая в строке 89 ".pass-input: focus + .pass-label :: after,"

Chris Li 10.09.2018 06:52

@ChrisLi Я удалил его, но почему желтый фон отображается так, когда фокусируется?

yalpsid 10.09.2018 07:15

Я постараюсь изо всех сил объяснить, как работает position: absolute, поэтому, когда вы добавляете height: 50% к элементу с position absolute, высота относительно первого предка с position: relative, в вашем случае его < form>, первый работает нормально, потому что элемент <form> находится на правильной высоте, но у вас есть 2 div, которые делают <form> выше, поэтому элемент after тоже выше.

Chris Li 10.09.2018 07:22

В коде у вас есть дополнительная запятая после последнего селектора в строке № 89 перед {

librewolf 10.09.2018 06:53

@yalpsid - codepen.io/anon/pen/ZMvmzN вот код с несколько фиксированной ситуацией. Сравните CSS и увидите различия, но в основном после установки position: absolute он просматривает дерево вложенных элементов, чтобы найти ближайший элемент с установленным положением (абсолютное, относительное, липкое, фиксированное), и это ссылка на верхний левый , справа, нижняя часть ребенка. Я помещаю позицию относительно метки, чтобы ваши псевдоэлементы after имели ссылку. затем я настроил вашу шкалу, чтобы она соответствовала точно 100%. Лучший совет - не использовать такие точные значения и чтобы многие селекторы

librewolf 10.09.2018 07:23

Спасибо......

yalpsid 10.09.2018 07:25
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
7
51
0

Другие вопросы по теме