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

Добрый день друзья, в этом уроке, мы рассмотрим понятие псевдоэлемента CSS и выясним, какую функцию выполняет каждый из них. Разницу между псевдоклассом и псевдоэлементом смотрите в конце статьи.

Псевдоэлементы — это специальные команды, с помощью которых можно реализовывать выборку части элемента и задания им CSS-свойств, также можно создавать часть элемента.

Схема псевдоэлемента выглядит следующим образом:

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

Или

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

Перед именем псевдоэлемента, ставится одинарное : или двойное двоеточие ::.

Двойное двоеточие ввели в CSS3, чтобы различать псевдоклассы и псевдоэлементы друг от друга.

Список псевдоэлементов CSS

  • :after — добавляет текст/символы в конец элемента с текстом, требуется CSS-свойство content
  • :before — добавляет текст/символы в начало элемента с текстом, требуется CSS-свойство content
  • :first-letter — задаёт CSS-свойства, первому символу текста элемента (можно создавать «буквицы»)
  • :first-line — задаёт CSS-свойства, первой строке текста элемента
  • ::after — псевдоэлемент CSS3, аналогичен :after
  • ::before — псевдоэлемент CSS3, аналогичен :before
  • ::first-letter — псевдоэлемент CSS3, аналогичен :first-letter
  • ::first-line — псевдоэлемент CSS3, аналогичен :first-line
  • ::selection — задаёт CSS-свойства, выделяемому пользователем тексту

Разница между псевдоклассом и псевдоэлементом заключается в следующем: псевдокласс задает стиль для элемента страницы, а псевдоэлемент задаёт стиль для части элемента страницы и даже может создавать дополнительную часть.


Дата публикации поста: 5 февраля 2016
Дата обновления поста: 28 октября 2014

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *