CSS псевдо-элементы используются для добавления специальных эффектов для некоторых селекторов.
Синтакс
Синтакс псевдо-элементов:
selector:pseudo-element {property:value;}
CSS классы такжу могут быть использованы с псевдо-элементами:
selector.class:pseudo-element {property:value;}
Псевдо-элемент :first-line
Псевдо-элемент :first-line используется для добавления специальных стилей для первой строки текста.
В следующем примере браузер форматирует первую строку текста в элементе p
в соответствии со стилем в псевдо-элементе :first-line (где браузер прерывает линию, зависит от размера окна браузера):
Пример 1
<html>
<head>
<meta charset="utf-8">
<style>
p:first-line { color:#ff0000; font-variant:small-caps; }
</style>
</head>
<body>
<p>Вы можете использовать псевдо-элемент :first-line для того, чтобы добавить специальный эффект к первой строке текста.</p>
</body>
</html>
Примечание: Псевдо-элемент :first-line может быть использован только с блочными элементами.
Примечание: Следующие свойства применяются к псевдо-элементу :first-line:
- свойства font
- свойства color
- свойства background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Псевдо-элемент :first-letter
Псевдо-элемент :first-letter используется для добавления специальных стилей для первого символа текста:
Пример 2
<html>
<head>
<meta charset="utf-8">
<style>
p:first-letter { color:#ff0000; font-size:xx-large; }
</style>
</head>
<body>
<p>Вы можете использовать псевдо-элемент :first-letter для того, чтобы добавить специальный эффект к первому символу текста!</p>
</body>
</html>
Примечание: Псевдо-элемент :first-letter может быть использован только с блочными элементами.
Примечание: Следующие свойства применяются к псевдо-элементу :first-letter :
- свойства font
- свойства color
- свойства background
- свойства margin
- свойства padding
- свойства border
- text-decoration
- vertical-align (только если "float" установлен в "none")
- text-transform
- line-height
- float
- clear
Псевдо-элементы и классы CSS
Псевдо-элементы могут комбинироваться с классами CSS:
p.article:first-letter { color:#ff0000; } <p class="article">A paragraph in an article</p>
Приведенный выше пример покажет первый символ всех параграфов с class="article", в красном.
Несколько псевдо-элементов
Несколько псевдо-элементов могут быть объединены.
В следующем примере, первый символ параграфа будет красным, в XX-большом размере шрифта. Остальная первая строка будет синей, и в капитель. Остальной параграф будет иметь размер шрифта и цвет по умолчанию:
Пример 3
<html>
<head>
<meta charset="utf-8">
<style>
p:first-letter { color:#ff0000; font-size:xx-large; }
p:first-line { color:#0000ff; font-variant:small-caps; }
</style>
</head>
<body>
<p>Вы можете комбинировать псевдо-элементы :first-letter и :first-line чтобы добавить специальный эффект к первой строке текста и первому символу текста!</p>
</body>
</html>
CSS - Псевдо-элемент :before
Псевдо-элемент :before может быть использован для вставки некоторого содержания, перед содержанием элемента.
Следующий пример вставляет изображение перед каждым элементом <h1>:
Пример 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1:before { content:url(/images/smiley.jpg); }
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Псевдо-элемент :before вставляет содержание до элемента.</p>
<h1>Это заголовок</h1>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает свойство content если указан !DOCTYPE.</p>
</body>
</html>
CSS - Псевдо-элемент :after
Псевдо-элемент :after может быть использован для вставки некоторого содержания, после содержания элемента.
Следующий пример вставляет изображение после каждого элемента <h1>:
Пример 5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1:after { content:url(/images/smiley.jpg); }
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Псевдо-элемент :after вставляет содержание после элемента.</p>
<h1>Это заголовок</h1>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает свойство content если указан !DOCTYPE.</p>
</body>
</html>
Псевдо-элементы
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Псевдо имя | Описание | CSS |
|---|---|---|
| :after | Добавляет содержимое после элемента | 2 |
| :before | Добавляет содержимое перед элементом | 2 |
| :first-letter | Добавляет стиль к первому символу текста | 1 |
| :first-line | Добавляет стиль к первой строке текста | 1 |
Была ли эта информация полезной?
