Использование псевдоэлементов

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

В CSS псевдоэлемент - это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определенную часть выбранных элементов.

Псевдоэлемент состоит из двойного двоеточия ( :: ), которое отличает его от псевдокласса, за которым следует его название:

^{::псевдоэлемент}

В одном селекторе можно использовать только один псевдоэлемент. Псевдоэлемент должен отображаться после всех остальных компонентов и псевдоклассов.

Элемент, к которому прикреплен псевдоэлемент, определяется как элемент-якорь. Полное правило CSS с использованием псевдоселектора выглядит следующим образом:

^{selector::pseudo-element { property: value; }}

Выбор может содержать только псевдоэлементы без якорного элемента. В текущем случае правило будет применяться к любому элементу, как если бы вы использовали перед ним селектор * (выбрать все элементы).

Вот три наиболее удобных с точки зрения работы с веб-компонентами SberMobile:

`::after`	Создает псевдоэлемент, который является последним дочерним элементом выбранного элемента. Может использоваться для добавления косметического содержимого в элемент с помощью свойства `content`.
`::before`	Создает псевдоэлемент, который является первым дочерним элементом выбранного элемента. Может использоваться для добавления косметического содержимого в элемент с помощью свойства `content`.
`::selection`	Применяет стили к той части документа, которая была выделена пользователем (например, при щелчке и перетаскивании мыши по тексту).

Браузеры поддерживают синтаксис одинарного двоеточия ( : ) для исходных четырех псевдоэлементов: :before, :after, :first-line и :first-letter.

Список доступных на данный момент псевдоэлементов CSS регулируется спецификациями W3C CSS и может быть найден на различных открытых ресурсах, таких как W3C Community Wiki.

Добавление новых элементов в Компонент

Работая над пользовательским интерфейсом, иногда удобно создавать дополнительные элементы с помощью CSS вместо того, чтобы добавлять дополнительные компоненты в панель управления. Текущий элемент может использоваться для красоты или для предоставления пользователю дополнительной информации.

Правила CSS для псевдоэлементов ::before и ::after могут использовать content: '<value>'; свойство, которое заменяет элемент сгенерированным значением. Возможные значения этого свойства для этих двух псевдоэлементов следующие:

`empty`	Генерирует пустой встроенный элемент. Применяется, если в значении свойства нет ничего внутри кавычек ( `content: '';` )
`none`	Когда применяется к псевдоэлементу, псевдоэлемент не генерируется.
`<string>`	Определяет текст для элемента. Текущее значение может состоять из любого количества текстовых символов. Нелатинские символы должны быть закодированы с использованием их экранирующих последовательностей Юникода.
`<content-list>`	Список анонимных инлайн-боксов, которые заменят содержимое выбранного элемента (в указанном порядке). Текущий список может включать строки, изображения, счетчики и так далее.
`<image>`	`Изображение>,` обозначаемое `типом данных` `url()` или `image-set()` или `<gradient>.`
`counter()`	Значение счетчика CSS, обычно число, полученное в результате вычислений, определенных свойствами `counter-reset` и `counter-increment`.
`attr(x)`	Значение атрибута указанного элемента в виде строки.
open-quote и close-quote	Замените эти значения на соответствующую строку из свойства CSS `quotes`.
`no-open-quote` и `no-close-quote`	Не представляют никакого содержимого, но увеличивают (уменьшают) уровень вложенности для кавычек.
`/ "Alternative text"`	Альтернативный текст может быть указан для изображения (или списка элементов содержимого) путем добавления прямой косой черты, а затем текста.

В качестве примера добавим в компонент Подпись то, что можно использовать в качестве индикатора состояния. Текущий подход избавляет от необходимости добавлять отдельный UI-компонент в приборную панель в довольно распространенном случае использования.

В Конструкторе UI добавьте компонент на приборную панель, щелкнув по нему в Палитре компонентов или перетащив его на макет.
Откройте редактор свойств, наведя курсор на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося компонента, или выбрав его в Дереве компонентов.
В редакторе свойств переключитесь на вкладку Стиль элемента.

На вкладке Стиль элемента добавьте правило к свойству Свойство CSS Стиль элемента:

^{width: fit-content;}
^{margin: auto;}
^{color: dimgrey;}
^{font-size: 24px;}
^{font-weight: 500;}

^{::before {}
^content:'';
^{display: inline-block;}
^{margin: 0 8px 2px 0;}
^{width: 12px;}
^{height: 12px;}
^{border-radius: 50%;}
^{background-color: limegreen;}
^}

Добавьте элемент, появляющийся на приборной панели перед содержимым Подписи, как только поле выходит из фокуса, расширяя размер компонента.

Сейчас у вас есть статическое тело индикатора, поэтому вы можете обновить его внешний вид с помощью Привязок:

обновляя непосредственно свойство CSS Стиль элемента;
путем изменения свойства Пользовательские классы компонента по условию, при этом все стили должны быть назначены классам заранее.

Ознакомьтесь с другими возможными вариантами применения привязок в статье Свойства стилей и привязки.

Избежание влияния на разметку Инструментальной панели

В случае использования псевдоэлементов ::before и ::after вы фактически добавляете новые элементы HTML в DOM, поэтому это может повлиять на разметку как компонента, так и самой приборной панели. Если вы хотите применить эти псевдоэлементы, не изменяя при этом существующую разметку, вам нужно добавить их вне обычного потока документов.

Document flow - это расположение элементов страницы, определенное положениями о позиционировании. Именно так различные элементы занимают пространство и располагаются друг вокруг друга.

Чтобы добиться этого, используйте свойство CSS position со значением absolute, fixed или sticky для псевдоэлемента, а затем определите его точную позицию относительно цели выбора.

Свойство CSS position задает, как элемент позиционируется в документе. Свойства top, right, bottom и left определяют конечное местоположение позиционированных элементов.

Для absolute позиции точное местоположение элемента, определенное с помощью свойств top, right, bottom и left, вычисляют относительно ближайшего позиционированного (нестатического) предка, которым является Контейнер компонента.

Рассмотрим случай, когда вы хотите добавить накладываемый блок с дополнительной информацией к определенному элементу внутри компонента. В текущем примере давайте добавим подсказку к переключателю слайдов компонента Карусель. Простое добавление псевдоэлемента в поток не поможет, так как повлияет на окружающую разметку.

В Конструкторе UI добавьте компонент на панель инструментов, щелкнув по нему в Палитре компонентов или перетащив его на макет.
Наведите на него курсор на макете и нажмите кнопку () Добавить элементы в правом верхнем углу появившегося компонента, чтобы добавить дополнительный слайд. В результате появится переключатель слайдов.
Откройте редактор свойств кнопок компонента, нажав кнопку () Настроить рядом с предыдущей в правом верхнем углу оверлея или выбрав ее в Дереве компонентов.
В редакторе свойств перейдите на вкладку Свойства контейнера.

Используя инструменты разработчика браузера, выясните, что переключатель слайдов представляет собой элемент <ul> с class="slick-dots slick-dots-bottom dots-container carousel0" внутри контейнера компонента.

На вкладке " Свойства контейнера " добавьте правило к свойству " Стиль контейнера ":

^{.slick-dots::after {}
^{content: 'Switch the slides by clicking on the elements below';}
^{padding: 8px 16px;}
^{border-radius: 16px;}
^{color: white;}
^{text-align: center;}
^{background-color: black;}
^{z-index: 1;}
^}

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

Добавьте к правилу еще два свойства CSS:

^{.slick-dots::after{}
^{content: 'Switch the slides by clicking on the elements below';}
^{position: absolute; /* remove the element from the document flow */}
^{bottom: 16px; /* set its absolute position */}
^{padding: 8px 16px;}
^{border-radius: 16px;}
^{color: white;}
^{text-align: center;}
^{background-color: black;}
^{z-index: 1;}
^}

Сейчас псевдоэлемент находится вне обычного потока документа и не мешает разметке.

Если вы хотите, чтобы добавленные вами псевдоэлементы плавали за пределами контейнера компонента на макете, попробуйте установить свойство Выход за пределы контента в группе Свойства контейнера на Видимый. Причина, по которой содержимое других компонентов, содержимое которых скрыто теми же границами, может стать видимым.

DPF_EXPORT_V5.8.8 / TIME_1716484523 / 2024-05-23 17:15:23 / STRLEN_28318 / STRLEN_HTML_23222

{VERSION}