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

Синтаксис

Синтаксис псевдо-элементов выглядит так:

селектор:псевдо-элемент {свойство:значение;}

Кроме того, вы можете использовать CSS классы вместе с псевдо-элементами:

селектор.элемент:псевдо-класс {свойство:значение;}

Псевдо-элемент :first-line

Псевдо-элемент first-line используется для применения стилей к первой строке текста.

В следующем примере вы сами убедитесь в том, что браузер отформатирует первую строку параграфа в соотвествии со стилем псевдо-элемента first-line (окрасит текст первой строки в красный цвет и преобразует буквы в уменьшенные заглавные):

p:first-line { color:#ff0000; font-variant:small-caps;

}

Посмотреть

Заметка: псевдо-элемент first-line можно применять только к блочным элементам.

Заметка: псевдо-элемент first-line может воздействовать на следующие свойства:

• свойства шрифта
• цвет
• цвет фона
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Псевдо-элемент :first-letter

Псевдо-элемент :first-letter применяется к первой букве элемента:

p:first-letter { color:#ff0000; font-size:xx-large;

}

Посмотреть

Заметка: псевдо-элемент «first-letter» действует только на блочные элементы.

Заметка: с помощью псевдо-элемента «first-letter» можно воздействовать на следующие свойства: 

• шрифт
• цвет
• цвет фона
• margin
• padding
• border
• text-decoration
• vertical-align (только если значение «float» равно «none»)
• text-transform
• line-height
• float
• clear

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

Псевдо-элементы можно комбинировать с классами CSS:

p.article:first-letter {color:#ff0000;}

Параграф в статье

В результате данного примера, во всех параграфах с классом «article», первая буква будет красной.

Комбинирование псевдо-элементов

Несколько псевдо-элементов можно комбинировать.

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

p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps;

}

Посмотреть

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

Псевдо-элемент «:before» используется для вставки какого-либо содержимого перед содержимым элемента.

В примере ниже мы покажем вставку изображения перед каждым элементом

:

h1:before { content:url(smiley.gif);

}

Посмотреть

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

В противоположность псевдо-элементу «:before» псевдо-элемент «:after» используется для вставки какого-либо содержимого после содержимого элемента.

Давайте посмотрим, как можно вставить изображение после содержимого элемента

:

h1:after { content:url(smiley.gif);

}

Посмотреть

Псевдо-элементы — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).