Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Псевдоэлементы 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-свойства, выделяемому пользователем тексту

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

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 28 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget