 |
Псевдоэлемент ::placeholder
|
|
|
|
Псевдоэлемент::after
Псевдоэлемент, который используется для вывода контента после содержимого элемента, к которому он добавляется. Псевдоэлемент::after работает совместно со свойством content.
По умолчанию::after создаёт строчный элемент.
Синтаксис
Селектор::after { content: "текст" } <style> p.new::after { content: "Новьё!"; /* Добавляемый текст */ color: #333; /* Цвет текста */ background-color: #fc0; /* Цвет фона */ font-size: 90%; /* Размер шрифта */ padding: 2px; /* Поля вокруг текста */ } </style>В данном примере в конце текстового абзаца, помеченного классом new, выводится определённый текст для привлечения внимания. Результат примера показан на рис. 1.
Примечание
В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов. В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.
Псевдоэлемент::backdrop
Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно::backdrop применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.
В настоящее время работает только с модальными окнами, созданными с помощью элемента <dialog>.
Синтаксис
Селектор::backdrop {... } <style> dialog { width: 300px; } dialog::backdrop { background: rgba(0,0,0,0.7); } </style>Результат данного примера показан на рис. 2 
Псевдоэлемент::before
Псевдоэлемент::before применяется для отображения контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.
По умолчанию::before создаёт строчный элемент.
Синтаксис
Селектор::before { content: "текст" } <style> li::before { content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ } li { list-style: none; /* Убираем исходные маркеры */ } </style>В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента::before выводится символ ¶. Результат примера продемонстрирован на рис. 3
|
|
|
Псевдоэлемент::first-letter
Псевдоэлемент::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
Селектор::first-letter {... } <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>Результат примера показан на рис. 4. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
Псевдоэлемент::first-line
Псевдоэлемент::first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т. д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
Синтаксис
Селектор::first-line {... } <style> p::first-line { color: red; /* Красный цвет текста */ font-style: italic; /* Курсивное начертание */ font-weight: bold; /* Жирное начертание */ } </style>Результат примера показан на рис. 5. В данном примере первая строка, выделенная с помощью тега <br>, изменяет свой вид за счет начертания и цвета.
Псевдоэлемент::placeholder
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
|
|
|
Синтаксис
Селектор::placeholder {... } <style> body { background: #053f38; } input[type="search"] { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ 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"]::-ms-input-placeholder { color: #ffd595; } input[type="search"]::placeholder { color: #ffd595; } </style>Результат примера показан на рис. 6.
Псевдоэлемент::selection
Псевдоэлемент::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background, background-color и text-shadow.
Синтаксис
Селектор::selection {... } <style> p::selection { color: #ff0; /* Цвет текста */ background: #000; /* Цвет фона */ } </style>В данном примере при выделении текста он изменяет свой цвет и фон.
|
|
|
