Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.
Начинается с двойного двоеточия (
::
), за которым следует название псевдоэлемента. Например, ::before
или ::after
.::before
и ::after
: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.p::before {
content: "«";
color: blue;
}
p::after {
content: "»";
color: blue;
}
::first-line
: Применяет стили к первой строке текста в блочном элементе.p::first-line {
font-weight: bold;
}
::first-letter
: Применяет стили к первой букве текста в блочном элементе.p::first-letter {
font-size: 200%;
}
::selection
: Применяет стили к части текста, которую пользователь выделил.p::selection {
background: yellow;
}
Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
Чтобы псевдоэлементы
::before
и ::after
отображались, необходимо задать свойство content
, даже если оно пустое (content: "";
).Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Для двусторонней привязки данных с помощью v-model есть модификаторы, позволяющие изменить стандартное поведение. Например, можно задать обновление значения только при завершении ввода, автоматически преобразовать значение в число или убрать пробелы с краёв строки. Это помогает упростить валидацию данных и уменьшить количество ошибок при вводе.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM