Эти псевдо-элементы используются для добавления специальных эффектов в некоторые селекторы.
Примеры:
- В примере показано, как добавить специальные эффекты к первой букве текста.
<html>
<head>
<style type="text/css">
h1:first-letter
{
color: #008080;
font-size: xx-large
}
</style>
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>
- В примере показано, как добавить специальные эффекты к первой строке текста.
<html>
<head>
<style type="text/css">
p:first-line
{
color: #808000;
font-variant: normal
}
</style>
</head>
<body>
<p>
Пример использования псевдо-элемента :first-line.<br>
Следующая строка в параграфе.
</p>
</body>
</html>
Синтаксис псевдо-элементов:
selector:pseudo-element {property: value}
Классы CSS также можно использовать с псевдо-элементами:
selector.class:pseudo-element {property: value}
Псевдо-элемент :first-line
Данный псевдо-элемент используется для добавления специальных стилей к первой строке текста в селекторе:
div {font-size: 5pt}
div:first-line {color: #808000; font-variant: normal}
<div>Текст, продолжающийся на две или большее количество строк </div>
В примере выше браузер выводит первую строку (длина определяется размером окна браузера), форматированную согласно псевдо-элементу "first-line".
Примечания:
- Псевдо-элемент "first-line" можно использовать только с элементами уровня блока.
- Следующие параметры применимы в псевдо-элементе "first-line":
- параметры шрифта
- параметры цвета
- параметры фона
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Псевдо-элемент :first-letter
Данный псевдо-элемент используется для добавления специального стиля первой букве текста в селекторе :
div {font-size: 20pt}
div:first-letter {font-size: 150%; float: right}
<div>Первое слово имеет специальный стиль</div>
Примечания:
- Псевдо-элемент "first-letter" может использоваться только с элементами блочного уровня.
- Следующие параметры применимы в псевдо-элементе "first-letter":
- параметры шрифта
- параметры цвета
- параметры фона
- параметры отступов
- параметры полей
- параметры границ
- text-decoration
- vertical-align (только если 'float' определен как 'none')
- text-transform
- line-height
- float
- clear
Псевдо-элементы и классы CSS
Псевдо-элементы можно объединять с классами CSS:
div.first:first-letter {color: #800000 }
<div class="first">Параграф статьи</div>
В примере выше первая буква всех элементов div, где class="first", будет красной.
Несколько псевдо-элементов
Несколько псевдо-элементов можно объединять:
div {font-size: 20pt}
div:first-letter {color: #808000; font-size: 150%}
div:first-line {color: #808080 }
<div>Текст текст текст</div>
В примере выше первая буква параграфа будет оливковой с размером шрифта 30pt. Остальная часть первой строки будет серой, а остаток параграфа будет иметь цвет по умолчанию.
CSS2 - Псевдо-элемент :before
Данный псевдо-элемент можно использовать для вставки некоторого содержимого перед элементом.
Следующий стиль будет воспроизводить некоторый звук перед каждым появлением элемента заголовка h5.
h5:before
{
content: url(song.wav)
}
CSS2 - Псевдо-элемент :after
Псевдо-элемент ":after" можно использовать для вставки некоторого содержимого после элемента.
Следующий стиль будет воспроизводить некоторый звук после каждого появления элемента заголовка h5.
h5:after
{
content: url(song.wav)
}
Псевдо-элементы
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| Псевдо-элемент |
Назначение |
IE |
F |
N |
W3C |
| :first-letter |
Добавляет специальный стиль к первой букве текста |
5 |
1 |
8 |
1 |
| :first-line |
Добавляет специальный стиль к первой строке текста |
5 |
1 |
8 |
1 |
| :before |
Вставляет некоторое содержимое перед элементом
|
|
1.5 |
8 |
2 |
| :after |
Вставляет некоторое содержимое после элемента
|
|
1.5 |
8 |
2 |
|
Посмотреть
порно видео в онлайне »