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

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


В 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-компонент в приборную панель в довольно распространенном случае использования.

  1. В Конструкторе UI добавьте компонент на приборную панель, щелкнув по нему в Палитре компонентов или перетащив его на макет.

  2. Откройте редактор свойств, наведя курсор на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося компонента, или выбрав его в Дереве компонентов.

  3. В редакторе свойств переключитесь на вкладку Стиль элемента.

  1. На вкладке Стиль элемента добавьте правило к свойству Свойство 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;
}

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

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

  • обновляя непосредственно свойство CSS Стиль элемента;

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


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


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

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


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


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


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



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


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

  1. В Конструкторе UI  добавьте компонент на панель инструментов, щелкнув по нему в Палитре компонентов или перетащив его на макет.

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

  3. Откройте редактор свойств кнопок компонента, нажав кнопку () Настроить рядом с предыдущей в правом верхнем углу оверлея или выбрав ее в Дереве компонентов.

  4. В редакторе свойств перейдите на вкладку Свойства контейнера.

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

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

.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;
}

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

  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;
}

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


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