::after
Псевдоэлемент, который используется для вывода контента после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content. По умолчанию ::after создаёт строчный элемент.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>after</title>
<style>
p.new::after {
content: "Новьё!"; /* Добавляемый текст */
color: #333; /* Цвет текста */
background-color: #fc0; /* Цвет фона */
font-size: 90%; /* Размер шрифта */
padding: 2px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<h2>Истории</h2>
<p class="new">
История о том, как необходимо было сделать могилу,
ее начали копать, а потом закапывать, и что из этого получилось.
</p>
<p>
История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.
</p>
</body>
</html>
::before
Псевдоэлемент ::before применяется для отображения контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content. По умолчанию ::before создаёт строчный элемент.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>before</title>
<style>
li::before {
content: "¶ "; /* Добавляем желаемый символ перед элементом списка */
}
li {
list-style: none; /* Убираем исходные маркеры */
}
</style>
</head>
<body>
<ul>
<li>Альфа</li>
<li>Бета</li>
<li>Гамма</li>
</ul>
</body>
</html>
::first-letter
Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-letter</title>
<style>
p {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
font-size: 0.9em; /* Размер шрифта */
}
p::first-letter {
font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 2em; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>
Луч фонарика высветил старые скрипучие ступени, по которым не далее
как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и
посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
завесу из мрака и пыли.
</p>
<p>
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
не было, и лишь на полу валялась порванная туфля Паши.
</p>
</body>
</html>
::first-line
Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т. д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-line</title>
<style>
p::first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
font-weight: bold; /* Жирное начертание */
}
</style>
</head>
<body>
<p>
Олимпия 2008<br>
Основной претендент на I место это конечно же Джей Катлер, достигший наивысшего
результата за последние два года.
</p>
</body>
</html>
::placeholder
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder</title>
<style>
input[type="search"] {
border: 1px solid #98baba; /* Параметры рамки */
background: black; /* Черный фон */
padding: 1px 4px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
}
input[type="search"]::-moz-placeholder {
color: #ffd595; /* Цвет подсказывающего текста */
}
input[type="search"]::-webkit-input-placeholder { color: #ffd595; }
input[type="search"]::-ms-input-placeholder { color: #ffd595; }
input[type="search"]::placeholder { color: #ffd595; }
</style>
</head>
<body>
<form action="handler.php">
<p>
<input type="search" placeholder="Поиск по сайту" name="q">
<input type="submit" value="Найти">
</p>
</form>
</body>
</html>
::selection
Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background, background-color, cursor, outline и text-shadow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>selection</title>
<style>
p::selection {
color: #ff0; /* Цвет текста */
background: #000; /* Цвет фона */
}
</style>
</head>
<body>
<p>При выделении этого текста он изменит свой цвет.</p>
</body>
</html>
::backdrop
Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно ::backdrop применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.
В настоящее время работает только с модальными окнами, созданными с помощью элемента <dialog>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>::backdrop</title>
<style>
dialog {
width: 300px;
}
dialog::backdrop {
background: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<button id="openDialog">Вход на сайт</button>
<dialog>
<form id="authentication" action="handler.php">
<p><input name="login" required autofocus placeholder="Логин"></p>
<p><input type="password" name="pass" required placeholder="Пароль"></p>
<p>
<button type="submit">Войти</button>
<button id="closeDialog">Закрыть окно</button>
</p>
</form>
</dialog>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#openDialog').onclick = function() {
dialog.showModal();
};
document.querySelector('#closeDialog').onclick = function() {
dialog.close();
};
</script>
</body>
</html>