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

Псевдоэлементы в CSS позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.

Псевдоэлемент — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Синтаксис:

Селектор:Псевдоэлемент { Описание правил стиля }

Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности.

Псевдоэлементы очень похожи на псевдоклассы, но есть и отличия. Они представляют собой ключевые слова — на этот раз предваряемые двумя двоеточиями (::) — которые можно добавлять к селекторам, чтобы выделить определенную часть элемента.

Рассмотрим стандартные псевдоэлементы:

1. ::after

В CSS, ::after создаёт псевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. Пример:

/* Добавить стрелки после ссылок */
a::after {
  content: "→";
}

2. ::before

В CSS, ::before создаёт псевдоэлемент, который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. Пример:

/* Добавить сердце перед ссылками */
a::before {
  content: "♥";
}

3. ::first-letter

CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы). Пример:

/* Стили для первой буквы элемента <p> */
p::first-letter {
  font-size: 130%;
}

4. ::first-line

CSS псевдоэлемент ::first-line применяет стили к первой строке блочного элемента. Длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста. Пример:

/* Стили для первой строки элемента <p> */
p::first-line {
  color: red;
}

В этой статье мы рассмотрели небольшую часть псевдоэлементов в css. Существует множество различных псевдоэлементов. Примеры различных псевдоэлементов можно найти в интернете в открытом доступе.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

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

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: