Псевдоэлемент before: ::before (:before) — CSS | MDN

::before — CSS — Дока

1. Кратко
2. Пример
3. Как пишется
4. Как понять
5. Подсказки
6. На практике
   1. Денис Ежков советует

Кратко

Скопировано

Когда мы в CSS добавляем ::before к селектору, для соответствующего элемента создаётся псевдоэлемент. Этот псевдоэлемент — его самый первый потомок, он идёт до внутреннего содержимого.

Пример

Скопировано

a::before {  content: "♥";}
          a::before {
  content: "♥";
}

Как пишется

Скопировано

::before {  /* Для CSS 3 */}:before {  /* Для CSS 2 */}
          ::before {
  /* Для CSS 3 */
}
:before {
  /* Для CSS 2 */
}

💡 В CSS 3 версии ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.

Как понять

Скопировано

Проще всего воспринимать псевдоэлемент ::before как дополнительный элемент в начале тега. Мы можем применить к нему любые стили.

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

По умолчанию псевдоэлемент ::before является строчным.

Самый простой пример использования ::before — добавление иконки перед важным текстом:

<div>  <p>Внимание! Этот абзац является важным предупреждением!</p></div><div>  <p>Этот абзац является информационным.</p></div>
          <div>
  <p>Внимание! Этот абзац является важным предупреждением!</p>
</div>
<div>
  <p>Этот абзац является информационным. </p>
</div>

.warning::before {  content: "⚠";  margin-right: 0.5em;}
          .warning::before {
  content: "⚠";
  margin-right: 0.5em;
}

Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Не забывайте прописывать свойство content для псевдоэлемента ::before. Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

💡 Псевдоэлемент ведёт себя ровно так же, как любой другой элемент в разметке, подчиняется тем же свойствам и законам. Просто его нет в HTML.

На практике

Скопировано

Денис Ежков советует

Скопировано

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

очень часто используют для стилизации нестандартных маркеров списка:

<ul>  <li>Сделать настоящее тату</li>  <li>Посмотреть «Звездные войны»</li>  <li>Научиться играть на укулеле</li>  <li>Не бриться полгода</li>  <li>Поучаствовать в чайной церемонии</li></ul>
          <ul>
  <li>Сделать настоящее тату</li>
  <li>Посмотреть «Звездные войны»</li>
  <li>Научиться играть на укулеле</li>
  <li>Не бриться полгода</li>
  <li>Поучаствовать в чайной церемонии</li>
</ul>

li::before {  content: "💜";  margin-right: 5px;}
          li::before {
  content: "💜";
  margin-right: 5px;
}

Открыть демо в новой вкладке

🛠 Пример с пустым свойством content:

<ul>  <li>Милый маленький грибочек</li>  <li>Сколопендровый листочек</li>  <li>Жёлтой пыльки чуть</li></ul>
           <ul>
  <li>Милый маленький грибочек</li>
  <li>Сколопендровый листочек</li>
  <li>Жёлтой пыльки чуть</li>
</ul>

li {  position: relative;  padding-left: 25px;}li::before {  /* Не забываем о свойстве content */  content: "";  width: 14px;  height: 14px;  background-color: #2E9AFF;  position: absolute;  left: 0;  top: 5px;}
          li {
  position: relative;
  padding-left: 25px;
}
li::before {
  /* Не забываем о свойстве content */
  content: "";
  width: 14px;
  height: 14px;
  background-color: #2E9AFF;
  position: absolute;
  left: 0;
  top: 5px;
}

Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

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

ctrl + alt + ←

→

::after

ctrl + alt + →

Псевдоэлемент ::before | CSS справочник

CSS селекторы

Значение и применение

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

Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

Поддержка браузерами

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
::before	4. 0	3.5	7.0*	3.1	9.0*	12.0

CSS синтаксис:

::before {
content: " ";
блок объявлений;
}

Версия CSS

CSS2

Пример использования

Рассмотрим пример, в котором перед каждым блоком с изображением и перед каждым абзацем будет генерироваться (добавляться) определенная фраза:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования псевдоэлемента ::before</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
 div.omg::before { /* выбираем все элементы <div> с классом omg и добавляем перед каждым содержимое */
content: "Внимание! Спасибо за внимание!"; /* содержимое, которое будет добавлено */
} 
p::before { /* выбираем все элементы <p> и добавляем перед каждым содержимое */
content: "Ответ: "; /* содержимое, которое будет добавлено */
} 
</style>
</head>
	<body>
		<div class = "omg">
			<img src = "nich. jpg" alt = "nich">
		</div>
		<div class = "omg">
			<img src = "nich.jpg" alt = "nich">
		</div>
		<p>Нет</p>
		<p>Да</p>
	</body>
</html>

В этом примере мы указали фиксированную ширину для всех изображений (ширина и высота 100 пикселей). Кроме того, мы выбрали все элементы <div> с классом

omg и добавили перед ними определенную фразу. Перед абзацами (элементы <p>) также добавляется определенная фраза.

---

Обращаю Ваше внимание, что к таким элементам как <input> и <img> напрямую псевдоэлемент ::before применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>.

---

Результат нашего примера:

Пример использования псевдоэлемента ::before.

Изменение цвета маркера через использование CSS свойства content и псевдоэлемента :before:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Изменение цвета маркера. </title>
<style> 
ul {
list-style : none; /* убираем маркеры у маркированного списка */
}
li:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */
content : "•"; /* вставляем содержимое, которое выглядит как маркер */
padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */
color : red; /* устанавливаем цвет шрифта */
}
</style>
</head>
<body>
<ul>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
</body>
</html>

Изменение цвета маркера через использование CSS свойства content.

Пример использования счетчиков в CSS через использование CSS свойств content, counter-reset, counter-increment и псевдоэлемента :before:.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования счетчиков в CSS. </title>
<style> 
body {
counter-reset : schetchik1; /* инициализируем счетчик №1 */
line-height : .3em; /* устанавливаем междустрочный интервал для всего документа */
}
 h3 {
counter-reset : schetchik2; /* инициализируем счетчик №2 */
}
h3:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h3> */
counter-increment : schetchik1; /* определяем инкремент для глав с шагом 1 (значение по умолчанию) */
content : "Глава № " counter(schetchik1) ". "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h3>. Значение counter определяет счетчик   */
}
h4 {
margin-left : 20px; /* устанавливаем величину отступа от левого края элемента */
}
h4:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h4> */
counter-increment : schetchik2; /* определяем инкремент для статей с шагом 1 (значение по умолчанию) */
content : counter(schetchik1) ".
  " counter(schetchik2) " "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h4>. Значение counter определяет счетчик   */
}
</style>
</head>
	<body>
		<h3>Название главы</h3>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h3>Название главы</h3>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h3>Название главы</h3>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h4>Статья</h4>
	</body>
</html>

Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример добавления кавычек к тексту в CSS</title>
<style> 
 * {
quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */
}
p:before {content : open-quote;}  /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */
p:after {content : close-quote;}  /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */
</style>
</head>
	<body>
		<q>Обычная цитата<q>
		<q>Это <q>ЦИТАТА</q> внутри цитаты</q>
		<p>Параграф, к которому, используя псевдоклассы добавлены кавычки. </p>
	</body>
</html>

Пример добавления и изменения кавычек в тексте.CSS селекторы

Псевдоэлементы — CSS: каскадные таблицы стилей

Псевдоэлемент CSS — это ключевое слово, добавляемое к селектору, которое позволяет вам стилизовать определенную часть выбранных элементов. Например, ::first-line можно использовать для изменения шрифта первой строки абзаца.

 /* Первая строка каждого элемента 
. */
p:: первая строка {
  цвет синий;
  преобразование текста: верхний регистр;
}
 

Примечание: В отличие от псевдоэлементов, псевдоклассов можно использовать для стилизации элемента на основе его состояния .

 селектор :: псевдоэлемент {
  стоимость имущества;
}
 

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

Примечание: Как правило, следует использовать двойное двоеточие ( :: ) вместо одинарного двоеточия ( : ). Это отличает псевдоклассы от псевдоэлементов. Однако, поскольку в старых версиях спецификации W3C этого различия не было, большинство браузеров поддерживают оба синтаксиса для исходных псевдоэлементов.

Псевдоэлементы, определенные набором спецификаций CSS, включают следующее:

A

• ::after

B

• ::фон
• ::до

C

• ::сигнал
• :: cue-регион

F

• :: первая буква
• :: первая линия
• :: кнопка выбора файла

G

• ::грамматическая ошибка Экспериментальный

M

• :: маркер

P

• ::часть()
• ::заполнитель

S

• ::выбор
• :: прорезь ()
• ::орфографическая ошибка Expect behavior to change in the future.»> Экспериментальный

Т

• ::целевой текст Экспериментальный

Спецификация
Каскадные таблицы стилей уровня 2, редакция 2 (CSS 2.2) Спецификация # псевдо-селекторы элементов

Браузер	Самая младшая версия	Опора
Firefox (Геккон)	1,0 (1,0)	:псевдоэлемент
	1,0 (1,5)	:псевдоэлемент ::псевдоэлемент
Опера	4,0	:псевдоэлемент
	7,0	:псевдоэлемент ::псевдоэлемент
Safari (WebKit)	1,0 (85)	:псевдоэлемент ::псевдоэлемент

• Псевдоклассы

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 23 февраля 2023 г. участниками MDN.

Руководство по псевдоэлементам CSS

Поделиться

Ответить

• 0
  

Nwose Lotanna Подписаться Веб-разработчик и писатель

29 сентября 2022 г. 8 минут чтения 2240

Примечание редактора : этот пост был обновлен 29 сентября 2022 года, чтобы включить сравнение псевдоклассов и псевдоэлементов CSS, а также рабочие демонстрации CodePen для каждого псевдоэлемента.

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

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

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

Чтобы перейти вперед:

• Что такое псевдоэлементы CSS?
  • Псевдоэлементы и псевдоклассы
• Типы псевдоэлементов CSS
  • ::до
  • ::после
  • :: первая буква
  • :: первая линия
  • :: маркер
  • ::заполнитель
  • :: выбор
  • ::фон
  • :: кнопка выбора файла
  • ::сигнал
  • ::часть()
  • :: прорезь ()
• Псевдоэлементы, специфичные для браузера
• Экспериментальные псевдоэлементы

Что такое псевдоэлементы CSS?

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

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

 /* Старый способ (CSS2) */
селектор: псевдоэлемент {
  стоимость имущества;
}
/* Современный способ (начиная с CSS3) */
селектор::псевдоэлемент {
  стоимость имущества;
}
 

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

Псевдоэлементы против псевдоклассов

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

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

Типы псевдоэлементов CSS

Существуют некоторые специфичные для браузера и экспериментальные псевдоэлементы, которые мы рассмотрим в следующих частях этой статьи. А пока вот список различных псевдоэлементов, которые поддерживают современные браузеры:

1. ::до
2. ::после
3. :: первая буква
4. :: первая линия
5. :: маркер
6. ::заполнитель
7. :: выбор
8. ::фон
9. :: кнопка выбора файла
10. ::сигнал
11. ::часть()
12. :: прорезь ()

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

::до

Ключевое слово ::before создает псевдоэлемент, который появляется непосредственно перед содержимым выбранного элемента HTML.

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

 .pe-before::before {
  content: "Содержимое, введенное псевдоэлементом ::before.";
  дисплей: блок;
  нижняя граница: 1em;
}
 

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

Вот еще один пример для демонстрации расширенного применения ::before .

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

Некоторые корректировки выравнивания и интервалов с помощью свойств flexbox и псевдоэлемента ::before упрощают реализацию:

 . tag-список {
  дисплей: гибкий;
  разрыв: 1em;
}
.tag-список ли,
.tag-список {
  дисплей: блок;
}
.tag-list a::before {
  содержание: "#";
  ...
}
 

См. список тегов Pen
с CSS ::before от Rahul (@_rahul)
на CodePen.

::после

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

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

.

 .pe-before::after {
  content: "Содержимое, введенное псевдоэлементом ::after.";
  дисплей: блок;
  поле сверху: 1em;
}
 

Проверьте код в действии здесь:

См. псевдоэлемент Pen
CSS ::after от Rahul (@_rahul)
на CodePen.

Для более продвинутой реализации псевдоэлемента ::after рассмотрите возможность создания «навигационной цепочки» с использованием косой черты между элементами.

Вот простой способ добиться этого с помощью ::after и некоторых настроек выравнивания:

См. Pen
Навигация по хлебным крошкам с помощью CSS ::after от Rahul (@_rahul)
на CodePen.

:: первая буква

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

Это может показаться сложным, но псевдоэлемент ::first-letter в CSS делает это относительно простым. Он представляет собой первую букву первой строки блочного элемента и работает только в том случае, если первый дочерний элемент целевого элемента является текстовым блоком.

Вот как легко настроить таргетинг на первую букву всех тегов абзаца и сделать их немного жирнее:

 р::первая буква {
  вес шрифта: 700;
}
 

См. псевдоэлемент Pen
CSS ::first-letter Рахула (@_rahul)
на CodePen.

Большинство макетов журнальных блогов используют псевдоэлемент ::first-letter для выделения первой буквы первого абзаца статьи. Он широко известен как эффект буквицы:

.

 основной p:first-child::first-letter {
  преобразование текста: верхний регистр;
  вес шрифта: 700;
  размер шрифта: 3em;
  высота строки: 1;
  плыть налево;
  поле: 0 0,5рем 0,1рем 0;
}
 

См. Эффект буквицы Pen
с помощью CSS ::first-letter Рахула (@_rahul)
на CodePen.

Очень важно понимать, что первую букву элемента с ::first-letter иногда бывает сложно определить. Например, если текст содержит знак препинания в начале, псевдоэлемент логически выберет знак вместо фактической первой буквы.

Другим примером может быть орграф или триграф, где вы хотите выбрать все две или три буквы. ::first-letter псевдоэлемент, в данном случае можно было выбрать только первый.

Также следите за использованием ::before с ::first-letter . Псевдоэлемент ::before действует как первый дочерний элемент данного элемента. Это приведет к тому, что ::first-letter предпочтет сгенерированное содержимое, добавленное им, а не фактическое содержимое во время выбора.

:: первая линия

С помощью ::first-line мы можем легко выбрать первую строку текста в блочном элементе. Этот псевдоэлемент учитывает ширину и размер шрифта элемента, а также ширину документа для определения выбора:

 p:: первая строка {
  вес шрифта: 700;
}
 

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

См. псевдоэлемент Pen
CSS ::first-line от Rahul (@_rahul)
на CodePen.

Давайте сделаем еще один шаг, изменив регистр для первой строки статьи. Это можно сделать, соединив ::first-line с псевдоклассом :first-child :

.

См. Ручку
Выделение первой строки с помощью CSS ::first-line by Rahul (@_rahul)
на CodePen.

:: маркер

Этот псевдоэлемент позволяет нам выбирать и изменять значок маркера и номер в поле маркера элемента списка. Он работает с чем-либо с дисплеем элементов списка . Элементы

и

являются одними из его общих применений:

 li::маркер {
  содержание: "♥";
}
 

Посмотреть демо здесь:

См. псевдоэлемент Pen
CSS ::marker от Rahul (@_rahul)
на CodePen.

Как вы можете видеть выше, псевдоэлемент ::marker сделал псевдоэлемент ::before ненужным. Было бы здорово, если бы в будущем можно было добавить интервал между маркером и текстом.

Добавление пользовательских маркеров в ненумерованный список — легкая прогулка. Давайте сделаем что-то подобное и с раскрываемыми сводками:

См. перо
Стилизация элементов раскрытия деталей с помощью CSS ::marker от Rahul (@_rahul)
на CodePen.

::заполнитель

Как следует из названия, псевдоэлемент ::placeholder позволяет стилизовать заполнитель элементов ввода формы. Большинство браузеров по умолчанию имеют заполнители светло-серого цвета. Вот как мы можем изменить их, используя приведенный ниже код CSS:

.

 ввод:: заполнитель {
  цвет синий;
}
 

В приведенной ниже демонстрации я попытался сделать цвет текста-заполнителя похожим на фон поля. Цветовая функция CSS HSL удобна для таких случаев; вы можете сохранить оттенок постоянным и создавать различные оттенки и оттенки, изменяя только яркость и насыщенность:

См. псевдоэлемент Pen
CSS ::placeholder от Rahul (@_rahul)
на CodePen.

::выбор

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

 :: выбор {
  цвет фона: #ccc;
  цвет: #888;
}
 

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

См. псевдоэлемент Pen
CSS ::placeholder от Rahul (@_rahul)
на CodePen.

::фон

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

Давайте разберемся с этим на примере, где мы меняем фон видео с черного на синий. Посмотрите этот пример CodePen и воспроизведите видео в полноэкранном режиме:

 видео :: фон {
  цвет фона: синий;
}
 

Это работает и для диалоговых элементов, которые при запуске получают настраиваемый цвет фона. Нажмите кнопку «показать диалоговое окно» в приведенной ниже демонстрации, чтобы увидеть его в действии:

См. Pen
CSS ::backdrop в действии с

Рахула (@_rahul)
на CodePen.

::кнопка выбора файла

В элементе ввода HTML-файла отображается кнопка, стиль которой с помощью CSS кажется невозможным. К вашему удивлению, ::file-selector-button Псевдоэлемент фактически позволяет вам настроить эту кнопку, и вот рабочая демонстрация этого:

 input[type="file"]::file-selector-button {
  цвет фона: синий;
  белый цвет;
  ...
}
 

Возможно, вам не понравится указывать тип ввода при добавлении стилей к этому псевдоэлементу. Я бы порекомендовал вам всегда упоминать тип, чтобы другие могли прочитать текст. Посмотрите, как аккуратно выглядит ввод файла с некоторыми дополнениями, используя ::file-input-button :

См. Pen
Стилизация ввода загрузки файла в CSS от Rahul (@_rahul)
на CodePen.

::сигнал

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

.

 <стиль>
  видео :: реплика {
    цвет: розовый;
    цвет фона: черный;
  }

<управление видео
       src="./путь/к/видео.файлу">
    <отслеживать по умолчанию
           вид = "подписи"
           srclang="en"
           src="./path/to/vtt.file">

 

Во избежание проблем с CORS убедитесь, что файлы видео и VTT поступают из одного и того же домена. Вот как выглядят субтитры VTT с поддержкой ::cue  :

::часть()

Из-за своей природы инкапсуляции элементов теневой DOM остается изолированным от остальной части страницы. Поэтому не все стили достигают компонентов, прикрепленных к обычному DOM, из теневого DOM.

Псевдоэлемент ::part() , новое дополнение к псевдоэлементам CSS, позволяет в определенной степени стилизовать теневой DOM:

 <шаблон>
    <раздел часть="виджет">
      
...
    

 мой-виджет:: часть (виджет) {
  ...
}
 

 <шаблон>
  <стиль>
    div :: прорези (диапазон) {
      красный цвет;
    }
    раздел :: прорези (диапазон) {
      цвет: зеленый;
    }
  
  <дел>
    Это слот div