Я не могу понять смысл этого кода, который приведен в качестве примера на developer.mozzila.org.
HTML:
<div>
<label for="fname">First name *: </label>
<input id="fname" name="fname" type="text" required>
<span></span>
</div>
и CSS:
input + span {
position: relative;
}
input + span::before {
position: absolute;
right: -20px;
top: 5px;
}
input:invalid {
border: 2px solid red;
}
input:invalid + span::before {
content: '✖';
color: red;
}
input:valid + span::before {
content: '✓';
color: green;
}
Я понимаю, почему они хотели бы использовать относительное позиционирование содержимого "span", но я не могу понять смысл второго абзаца кода, в котором они используют селектор ": before" , а затем внутри они снова меняют положение на «абсолютное», не добавляя никакого содержимого.
Разве «до» и «после» не используются для добавления содержимого? В этом примере контент не добавляется, так в чем смысл добавления position: absolute? Что позиционируется? И разве «position: absolute» не просто переписывает вышеуказанное «position: relative»?
Я протестировал этот код, удалив абсолютное положение, и он работает таким же образом. Фактически, добавление абсолютной позиции только усложняет позиционирование содержимого.
Они дали следующее объяснение:
Мы устанавливаем диапазон в position: relative, чтобы мы могли расположите сгенерированный контент относительно них. Затем мы абсолютно позиционируем различный сгенерированный контент в зависимости от того, являются ли данные формы действительными или недействительными - зеленая галочка или красный крест соответственно.
Но это объяснение не имеет для меня смысла. Они говорят, что установили относительную позицию, чтобы позиционировать сгенерированный контент, предположительно, они имеют в виду галочку относительно «них», под «ними», предположительно, они имеют в виду «диапазон»? Для меня это не имеет смысла. Контент отдельно не размещается в их контейнере, так о чем они говорят? И о каком «различном сгенерированном контенте» они говорят? Я не вижу другого сгенерированного контента.
Я был бы признателен, если бы кто-нибудь объяснил мне свои аргументы в пользу этого запутанного кода.