Псевдоэлементы

Обновлено: 30.05.2022

Псевдоэлементы

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

  • ::-ms-browse

    ::-ms-browse

    Позволяет задать стиль кнопки «Обзор» при загрузке файлов через <input type="file">.

  • ::-ms-check

    ::-ms-check

    Задаёт стиль переключателей (input type="radio") и флажков (input type="checkbox").

  • ::-ms-clear

    ::-ms-clear

    Задаёт стиль кнопки для очистки текстового поля. Исходно эта кнопка не видна, она появляется в правой части поля только при вводе текста.

  • ::-ms-expand

    ::-ms-expand

    Задаёт стиль кнопки раскрытия списка, созданного с помощью элемента <select>.

  • ::-ms-fill

    ::-ms-fill

    Задаёт стиль индикатора элемента <progress>. Само значение индикатора и его положение меняется динамически посредством скриптов.

  • ::-ms-fill-lower

    ::-ms-fill-lower

    Задаёт стиль слайдера (input type="range"). Стиль применяется к дорожке слайдера от меньшего значения до текущего значения, где располагается ползунок.

  • ::-ms-fill-upper

    ::-ms-fill-upper

    Задаёт стиль слайдера (input type="range"). Стиль применяется к дорожке слайдера от текущего значения, где располагается ползунок, до максимального значения слайдера.

  • ::-ms-reveal

    ::-ms-reveal

    Задаёт стиль кнопки для просмотра пароля в поле <input type="password">. Кнопка исходно не видна и появляется в правой части поля при вводе пароля (рис. 1). Если щёлкнуть по этой кнопке и удерживать левую кнопку мыши, то вместо точек будет показан вводимый пароль.

  • ::-ms-thumb

    ::-ms-thumb

    Задаёт стиль ползунка для слайдера (input type="range").

  • ::-ms-ticks-after

    ::-ms-ticks-after

    Применяет стилевые параметры к делениям ниже дорожки слайдера (input type="range"). По умолчанию эти деления не отображаются и чтобы они стали видны, в стилях следует добавить свойство display со значением block.

  • ::-ms-ticks-before

    ::-ms-ticks-before

    Применяет стилевые параметры к делениям выше дорожки слайдера (input type="range"). По умолчанию эти деления не отображаются и чтобы они стали видны, в стилях следует добавить свойство display со значением block.

  • ::-ms-tooltip

    ::-ms-tooltip

    Применяет стилевые параметры к всплывающей подсказке слайдера (input type="range"), где отображается выбранное текущее значение. Допустимо задавать только свойства display и visibility.

  • ::-ms-track

    ::-ms-track

    Задаёт стиль дорожки ползунка для слайдера (input type="range").

  • ::-ms-value

    ::-ms-value

    Позволяет изменять стиль элементов формы, сделанных с помощью <input> или <select>.

  • Псевдоэлемент ::after

    Псевдоэлемент ::after

    Псевдоэлемент, который используется для вывода контента после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content.

  • Псевдоэлемент ::backdrop

    Псевдоэлемент ::backdrop

    Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно ::backdrop применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.

  • Псевдоэлемент ::before

    Псевдоэлемент ::before

    Псевдоэлемент ::before применяется для отображения контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

  • Псевдоэлемент ::first-letter

    Псевдоэлемент ::first-letter

    Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

  • Псевдоэлемент ::first-line

    Псевдоэлемент ::first-line

    Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т. д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

  • Псевдоэлемент ::placeholder

    Псевдоэлемент ::placeholder

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

  • Псевдоэлемент ::selection

    Псевдоэлемент ::selection

    Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background, background-color, cursor, outline и text-shadow.