Главная › Новости

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

Опубликовано: 23.08.2018

Псевдоэлементы и псевдоклассы в CSS: расширяем возможности CSS селекторов

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

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

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

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

Или

Псевдоклассы и псевдоэлементы, часть 1 | Курс HTML & CSS 2018 | Занятие №7

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

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

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

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

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

CSS3 для начинающих | #15 Псевдо-классы CSS

Вам понравились уроки? Поддержите проект "Учебники для вебмастера" !

Можете отправить с карточки, мобильного телефона или яндекс.кошелька.

Минимальная сумма перевода 30 руб.

Статья создана: 28 Окт 2014

Статья обновлена: 5 Фев 2016