Псевдо-элементы CSS

Показывать лекцию целиком

Эти псевдо-элементы используются для добавления специальных эффектов в некоторые селекторы.

Примеры:

В примере показано, как добавить специальные эффекты к первой букве текста.

<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>

В примере выше первая буква параграфа будет оливковой с размером шрифта 20pt. Остальная часть первой строки будет серой, а остаток параграфа будет иметь цвет по умолчанию.

CSS2 - Псевдо-элемент :before

Данный псевдо-элемент можно использовать для вставки некоторого содержимого перед элементом.

Следующий стиль будет воспроизводить некоторый звук перед каждым появлением элемента заголовка h5.

h5:before
{
content: url(song.wav)
}

CSS2 - Псевдо-элемент :after

Псевдо-элемент ":after" можно использовать для вставки некоторого содержимого после элемента.

Следующий стиль будет воспроизводить некоторый звук после каждого появления элемента заголовка h5.

h5:after
{
content: url(song.wav)
}