HTML-верстка: инструменты и приемы профессиональной front-end разработки

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


назад вперед

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


Синтаксис

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

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

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

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


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

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

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

Пример

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

Посмотреть

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

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


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

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

Пример

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

Посмотреть

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

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


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

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

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

<p class="article">Параграф в статье</p>

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


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

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

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

Пример

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

Посмотреть


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

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

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

Пример

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

Посмотреть


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

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

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

Пример

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

Посмотреть


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

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

Название Описание CSS
:after Добавление содержимого после элемента 2
:before Добавление содержимого до элемента 2
:first-letter Стилизация первой буквы 1
:first-line Стилизация первой строки 1


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта