что такое псевдоэлементы css
Псевдоэлементы
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства.
:after
Пример 16.1. Применение :after
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью :after
:before
Пример 16.2. Использование :before
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью :before
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование :first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
2. Что делает следующий стиль?
OL LI:first-letter <
color: red;
>
3. Какой селектор написан с ошибкой?
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
CSS before, after и другие псевдоэлементы
В этой статье разберём after, before и другие CSS псевдоэлементы. Рассмотрим их назначение и примеры их использования на сайте.
Что такое псевдоэлемент и его назначение
Но нотация с двумя двоеточиями появилась только в CSS3. Это было сделано для того, чтобы в CSS коде можно было очень просто отличить псевдоэлементы от псевдоклассов. До CSS3 псевдоэлементы определялись так же, как и псевдоклассы, т.е. с помощью одного двоеточия. Все современные браузеры принимают для определения псевдоэлементов как одно двоеточие, так и два.
Обратите внимание, что псевдоэлементы не добавляются в DOM. Поэтому получить псевдоэлемент с помощью JavaScript и с использованием библиотеки jQuery нельзя.
Псевдоэлементы применяются на сайте только в оформительских целях, т.е. для добавления к элементам определённых дизайнерских решений. С помощью них не рекомендуется добавлять на сайт важную информацию. Если этих элементов нет в DOM, то к ним нельзя добавить обработчики событий или каким-то другим образом взаимодействовать с ними через JavaScript.
CSS псевдоэлемент first-letter
Псевдоэлемент first-letter предназначен для задания стилей первому символу в тексте блочного элемента, но только в том случае если перед этим символом нет другого контента (изображения, inline таблицы).
К этому псевдоэлементу могут применяться только ограниченный набор CSS свойств. К ним относятся свойства, имеющие отношения к цвету, фону, границам, свойствам шрифта, полям padding и margin.
CSS3 синтаксис first-letter :
Если с помощью псевдоэлемента before и CSS-свойства content добавить некоторый текст к элементу, то в этом случае first-letter применит заданные стили к первому символу этого текста.
CSS псевдоэлемент first-line
Псевдоэлемент first-line предназначен для оформления первой строки форматированного текста элемента с блочным отображением.
Пример, в котором с помощью псевдоэлемента first-line преобразуем символы первой строки текста в прописные и установим им жирное начертание.
Обратите внимание, что на адаптивных сайтах первая строка может иметь на разных по размеру экранах разную длину. Если нужно чтобы первая линия состояла из одного и того же количества символов на разных экранах устройств, то её нужно просто ограничить.
CSS псевдоэлемент before
Псевдоэлемент before не наследует стили. Поэтому если необходимо чтобы у него были стили как у родительского элемента, то ему необходимо их явно прописывать.
CSS псевдоэлемент after
Примеры использования псевдоэлементов after и before
1. Применение CSS псевдоэлементов after и before для оформления цитаты.
HTML разметка цитаты:
CSS код для оформления цитаты:
2. Пример использования псевдоэлемента before для разделения элементов в хлебных крошках.
HTML структура хлебных крошек:
CSS код хлебных крошек:
Изображние хлебных крошек:
3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.
CSS код с использованием after и before:
HTML разметка этого примера:
CSS псевдоэлемент selection
Псевдоэлемент selection предназначен для установления стилей к выделенному пользователем фрагмента текста.
Пример, в котором зададим стили для оформления выделенного пользователем фрагмента текста:
Псевдоэлементы
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства.
:after
Пример 16.1. Применение :after
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью :after
:before
Пример 16.2. Использование :before
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью :before
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование :first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
2. Что делает следующий стиль?
OL LI:first-letter <
color: red;
>
3. Какой селектор написан с ошибкой?
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
CSS Псевдоэлементы
Что такое псевдоэлементы?
CSS псевдоэлемент используется для стилизации определенных частей элемента.
Например, его можно использовать для:
Синтаксис
Псевдоэлемент ::first-line
Псевдоэлемент ::first-line используется для добавления специального стиля к первой строке текста.
В следующем примере форматируется первая строка текста во всех элементах
Пример
Примечание: Псевдоэлемент ::first-line может применяться только к блочным элементам.
Следующие свойства относятся к псевдоэлементу ::first-line :
Двойное двоеточие заменило запись с двоеточием для псевдоэлементов в CSS3. Это была попытка W3C провести различие между псевдо-классами и псевдоэлементами.
Синтаксис с одиночным двоеточием использовался для псевдо-классов и псевдоэлементов в CSS2 и CSS1.
Для обратной совместимости синтаксис с одним двоеточием приемлем для псевдоэлементов в CSS2 и CSS1.
Псевдоэлемент ::first-letter
Псевдоэлемент ::first-letter псевдоэлемент используется для добавления специального стиля к первой букве текста.
В следующем примере форматируется первая буква текста во всех элементах
Пример
Примечание: Псевдоэлемент ::first-letter может применяться только к блочным элементам.
Следующие свойства применяются к псевдоэлементу ::first-letter:
Псевдоэлементы и CSS классы
Псевдоэлементы можно комбинировать с классами CSS:
Пример
Несколько псевдоэлементов
Несколько псевдоэлементов также могут быть объединены.
В следующем примере первая буква параграфа будет красного цвета с размером шрифта xx-Large. Остальная часть первой строки будет синей, а также заглавными буквами. Остальная часть параграфа будет размером и цветом шрифта по умолчанию:
Пример
p::first-letter <
color: #ff0000;
font-size: xx-large;
>
p::first-line <
color: #0000ff;
font-variant: small-caps;
>
Псевдоэлемент ::before может использоваться для вставки некоторого содержимого перед содержимым элемента.
В следующем примере вставляется изображение перед содержимым каждого элемента
Пример
Псевдоэлемент ::after может использоваться для вставки некоторого содержимого после содержимого элемента.
В следующем примере вставляется изображение после содержимого каждого элемента
Пример
Псевдоэлемент ::marker выбирает маркеры элементов списка.
В следующем примере стили маркеров элементов списка:
Пример
Псевдоэлемент ::selection соответствует части элемента, выбранной пользователем.
В следующем примере выделенный текст становится красным на желтом фоне:
Псевдоклассы и псевдоэлементы
Предыдущие статьи этого учебника преимущественно были посвящены применению CSS стилей непосредственно к HTML элементам через использование различных селекторов, таких как селектор типа, селектор класса, id селектора и селектора потомков.
Современный стандарт каскадных таблиц стилей позволяет форматировать не только элементы к которым можно явно обратиться, но и предоставляет возможность стилизовать такие части документа, которые явно не определены в дереве документа, либо стилизовать их в зависимости от внешних факторов. Например, изменение первой строки абзаца, или изменение вида ссылки, на которую в настоящий момент наведен указатель мыши, история навигации в документе, а так же размещение сгенерированного текстового содержимого после или до определенного элемента.
В этой статье учебника пойдет речь о специальных псевдоклассах и псевдоэлементах, которые дают возможность затронуть форматирование на странице такие особенности элементов, которые явным образом не указать.
Псевдоэлементы
Псевдоэлементы ::first-letter и ::first-line
В современном стандарте CSS 3 используются 5 (пять) основных псевдоэлементов, которые добавляются к селекторам и имеют следующий синтаксис:
Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3.
Первыми псевдоэлементами, которые мы рассмотрим будут ::first-letter и ::first-line. Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.
Псевдоэлемент ::first-line позволяет стилизовать первую строку абзаца, которая будет отличаться от основного текста. Данный псевдоэлемент дает более широкие возможности для оформления текста.
Давайте рассмотрим пример их использования: