Содержимое
Классы задают свойство content псевдоэлементам ::before и ::after.
Берите *-none, чтобы убрать декоративный псевдоэлемент компонента, и
*-empty, чтобы включить псевдоэлемент, который рисуется только фоном,
рамкой или размерами.
Пример
Стили demo-badge и demo-dot в примере рисуют псевдоэлемент ::before.
before-none убирает метку «Новое», а before-empty включает точку:
без свойства content псевдоэлемент не появляется.
Классы
| Класс | CSS | Значения |
|---|---|---|
before-none (.before-none::before) |
content: none |
— |
after-none (.after-none::after) |
content: none |
— |
before-empty (.before-empty::before) |
content: '' |
— |
after-empty (.after-empty::after) |
content: '' |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Псевдоэлемент появляется, только когда у него задано content. Пустое
содержимое '' создаёт его без текста — дальше вид задают ваши стили:
.status::before {
display: inline-block;
inline-size: 0.5rem;
block-size: 0.5rem;
border-radius: 50%;
background-color: var(--sf-success);
}
<span class="status before-empty">В сети</span>
before-none и after-none убирают псевдоэлемент, который добавил стиль
компонента или проекта, не меняя этот стиль.
Ограничения
- Классы задают только
content: размеры, цвет и положение псевдоэлемента задают ваши стили. - Текст в
contentпрограммы чтения с экрана могут озвучивать. Смысловой текст держите в разметке, а в псевдоэлементах — только оформление. - Стиль, который задаёт
contentвне слоёв каскада, перекрывает классы: они лежат в слое утилит.