Псевдоелементи

Оновлено: 20.01.2023

Псевдоелементи

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

  • ::-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.