Псевдоэлементы для содержимого
Псевдоэлементы для содержимого позволяют добавлять содержимое до или после элемента, стилизовать маркеры списков и многое другое.
Псевдоэлемент CSS ::before
Чтобы добавить что-либо перед содержимым элемента, используйте ::before, а в свойстве content укажите, что именно добавить.
Пример
Каждый элемент <h3> получает изображение перед своим содержимым.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::before Pseudo-element</title>
<style>
h3::before {
content: url(https://prompt-cookbook.com);
}
</style>
</head>
<body>
<h2>The ::before Pseudo-element</h2>
<h3>This is a heading</h3>
<p>The ::before pseudo-element inserts content before the content of each h3 element.</p>
<h3>This is another heading</h3>
<p>Each h3 heading gets a smiley image before it.</p>
</body>
</html>
Псевдоэлемент CSS ::after
Его парный псевдоэлемент ::after добавляет то, что указано в свойстве content, в конец содержимого элемента.
Пример
Каждый элемент <h3> получает изображение после своего содержимого.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::after Pseudo-element</title>
<style>
h3::after {
content: url(https://prompt-cookbook.com);
}
</style>
</head>
<body>
<h2>The ::after Pseudo-element</h2>
<h3>This is a heading</h3>
<p>The ::after pseudo-element inserts content after the content of each h3 element.</p>
<h3>This is another heading</h3>
<p>Each h3 heading gets a smiley image after it.</p>
</body>
</html>
Псевдоэлемент CSS ::marker
Маркеры элементов списка (точки или числа) можно стилизовать с помощью ::marker.
Пример
Здесь маркеры элементов списка получают собственный стиль.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::marker Pseudo-element</title>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<h2>The ::marker Pseudo-element</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
Псевдоэлемент CSS ::selection
Любую часть текста, которую выделяет пользователь, можно стилизовать с помощью ::selection.
Пример
Выделенный пользователем текст становится красным на жёлтом фоне.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::selection Pseudo-element</title>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h2>The ::selection Pseudo-element</h2>
<p>Select some of this text to see the ::selection effect. The selected text will appear in red with a yellow background.</p>
</body>
</html>
Псевдоэлемент CSS ::backdrop
Область позади диалогового окна или элемента popover можно стилизовать с помощью ::backdrop.
Пример
Здесь область позади диалогового окна получает собственный стиль.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::backdrop Pseudo-element</title>
<style>
dialog::backdrop {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>The ::backdrop Pseudo-element</h2>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
<dialog id="myDialog">
<h3>Dialog Box</h3>
<p>This dialog has a light green backdrop.</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
</body>
</html>