Возможности css3

Псевдоэлементы :Before и :After с фоновым изображением

Принцип добавления псевдоэлементов с фоновым изображение похож на предыдущий пример, но только в качестве контента будет использоваться изображение. Можно использовать как отдельные изображения (иконки), так и спрайты.

В качестве примера я приготовил небольшой спрайт.

Пример css спрайта

А теперь давайте разберём, как добавить псевдоэлементы с изображением.

Код html будет тот же.

<span class=”psevdo”>Здесь может быть любой текст.</span>

А вот css стили будут отличаться. Отличие в том, что свойство content будет пустым. Значение будет подставляться из свойства background.

.psevdo:before{
content: ""; /*поле контент оставляем пустым*/
float: left; /*обтекание по левому краю*/
position: relative; /*позиционирование*/
top: 4px; /*отступ сверху*/
left: 4px; /*отступ слева*/
background: url(glyphicons.png) -3px -3px no-repeat; /*фоновое изображение, позиция, не размножать*/
display: block; /*блочный элемент*/
height: 25px; /*высота*/
width: 25px; /*ширина*/
}
.psevdo:after{
content: "";
position: absolute;
top: 8px;
left: 188px;
background: url(glyphicons.png) -25px 10px no-repeat;
display: block;
height: 25px;
width: 25px;
}

В результате применения этих стилей – я получил вот такой эффект.

Готовый пример

Естественно, в каждом конкретном примере свойства css будут отличаться.

А теперь рассмотрим вариант, когда в качестве контента будут иконки специальных шрифтов. Этот вариант мне нравится больше всего.

Что такое псевдоэлемент?

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

::pseudo-element-name

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

Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

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

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

Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

Как работать с псевдоэлементом after в CSS?

Псевдоэлемент after позволяет добавить произвольный контент в конце указанного элемента.

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

Например, добавим изображение после блока с идентификатором #content

Полноценную картинку через тег <img> мы таким образом не вставим, поэтому будем задавать её через фон.

1.Подготавливаем изображение нужного размера и загружаем его на хостинг в папку с картинками вашего шаблона.

2.Теперь в самом конце CSS файла пишем код:

PHP

#content::after {
content:»;
display: block; /*делаем элемент блочный*/
height:100px; /*задаём высоту*/
background: url(images/bottom-image1.png) no-repeat; /*указываем загруженную картинку в качестве фона псевдоэлемента*/
}

1
2
3
4
5
6

#content::after {

content»;

displayblock;/*делаем элемент блочный*/

height100px;/*задаём высоту*/

backgroundurl(imagesbottom-image1.png)no-repeat;/*указываем загруженную картинку в качестве фона псевдоэлемента*/

}

Путь в скобках для фонового изображения у вас будет отличаться. Если вы путаетесь в этом вопросе, то вам может помочь эта статья: «Как прописать путь к файлу в HTML?»

В результате в конце указанного блока у нас добавится новый блок с изображением.

Псевдоклассы и псевдоэлементы

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

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

Выводы

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

Благодаря селекторам потомков вам доступны гибкие и компактные настройки CSS-стилей.

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

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

Следующая часть главы – о дочерних селекторах.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Что такое псевдокласс?

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

Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

:pseudo-class-name

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

Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

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

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

— упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
— применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.

:enabled

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

Мы можем использовать комбинацию :enabled и :disabled для обеспечения визуальной обратной связи, тем самым улучшив UX.

Пример: поле ввода имени было выключено, но затем мы его активируем. У него появится зеленая обводка в 1px и его видимость (opacity) изменится на 1:

:enabled {    opacity: 1;    border: 1px solid green;}

Совет: Использовать enabled=”enabled” в разметке не обязательно. Тот же результат достигается при помощи логического атрибута enabled у html-элемента. Однако помните, что enabled=”enabled” необходимо в XHTML.

Demo:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
Составьте HTML страницу на которой:
1. Ссылки по умолчанию имеют цвет текста черный.
2. При наведении на ссылку цвет текста ссылки должен соответствовать её названию (red, green или blue).
3. При выделении текста ссылки цвет заднего фона должен соответствовать её названию.
4. Цвет первой буквы каждого абзаца должен соответствовать определенному цвету.
5. При выделении текста абзаца цвет заднего фона должен соответствовать цвету первой буквы.
6. Пока на абзаце удерживается кнопка мыши цвет текста должен соответствовать тематике абзаца (red, green или blue).
7. Продвинутое задание: пока на абзаце удерживается кнопка мыши цвет первой буквы должен быть черный.
8. Продвинутое задание: оптимизируйте (сократите) css код, образуя групповые селекторы, отвечающие за один и тот же цвет при том, или ином состоянии элемента, где это возможно.
Перед выполнением практического задания внимательно изучите пример:

Практическое задание № 4.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Селекторы. Часть 2.

Селекторы. Часть 3.

Блок с цитатой

::before и ::after прекрасно подходят для оформления цитат, в частности, вывода увеличенных кавычек, которые показывают пользователям, что перед ними цитата (рис. 3).

Рис. 3. Вид цитаты с кавычками

Для отображения кавычки перед текстом мы используем ::before, а после текста — ::after. К ним же добавляем и желаемое оформление кавычек, вроде изменения цвета и размера (пример 3).

Пример 3. Кавычки в цитате

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цитата</title>
<style>
blockquote {
background: #f9f0de; /* Цвет фона */
border-left: 2px solid #0083ca; /* Линия слева */
padding: 1em; /* Поля вокруг текста */
}
blockquote::before,
blockquote::after {
content: «“»; /* Левая кавычка */
font-size: 40px; /* Размер текста кавычек */
color: #c1172c; /* Цвет кавычек */
line-height: 0; /* Текст не занимает место */
}
blockquote::after {
content: «”»; /* Правая кавычка */
}
</style>
</head>
<body>
<blockquote>Чаще всего выход там, где был вход.</blockquote>
</body>
</html>

Как работать с псевдоэлементом before в CSS?

Before позволяет нам добавить свой блок перед любым элементом на вашем сайте. Для того чтобы это сделать нам нужно:

1.Определяем класс или идентификатор элемента, перед которым мы хотим добавить свой блок. Как это делать показано в этой статье.
2.Подключаемся к сайту через FTP или заходим в файловый менеджер на хостинге.

В этой статье я рассказывала как редактировать файлы сайта сразу на хостинге при помощи Notepad++ «Редактирование файлов сайта в Notepad++»
3.Открываем CSS файл, в котором прописаны стили сайта. Для сайтов на CMS этот файл находится в папке с активным шаблоном и может называться style.css, stylesheet.css, main.css в зависимости от CMS.
4.В самом конце этого файла пишем код:

PHP

.entry-meta::before {
content:’Привет!’;
}

1
2
3

.entry-meta::before{

content’Привет!’;

}

Вместо .entry-meta указываете класс или идентификатор своего элемента.
Внутри css свойства content в кавычках вы можете указать свой текст или какой-то символ.

Примеры символов и их коды я показывала в этой статье: «Таблица символов utf 8 для вставки иконок»

5.Так же мы можем задать для нашего псевдоэлемента следующие CSS свойства:

PHP

height:20px; /*высота псевдоэлемента*/
color:#fff; /*цвет текста*/
background:#2F73B6; /*цвет фона псевдоэлемента*/
border:1px solid #000; /*рамка*/
font-size:16px; /*размер шрифта*/
padding:10px; /*внутренний отступ псевдоэлемента*/
display:block;/*превращаем в блочный элемент*/
text-align:left;/*выравнивание текста*/ и другие CSS свойства.
width:100%; /*ширина псевдоэлемента*/

1
2
3
4
5
6
7
8
9

height20px;/*высота псевдоэлемента*/

color#fff; /*цвет текста*/

background#2F73B6; /*цвет фона псевдоэлемента*/

border1pxsolid#000; /*рамка*/

font-size16px;/*размер шрифта*/

padding10px;/*внутренний отступ псевдоэлемента*/

displayblock;/*превращаем в блочный элемент*/

text-alignleft;/*выравнивание текста*/идругиеCSSсвойства.

width100%;/*ширина псевдоэлемента*/

6.Сохраняем изменения в файле и смотрим что получилось.

Обратите внимание, как отображается наш псевдоэлемент before в HTML коде. Он не является самостоятельным тегом и привязан к элементу класс которого мы указали в CSS файле.

:fullscreen (эксперимент)

ПК :fullscreen выбирает элементы, которые отображаются в полноэкранном режиме.

Как не странно, он не предназначен для сценария, когда пользователь нажимает клавишу F11 для входа в полноэкранный режим браузера. Скорее всего он предназначен для работы с JavaScript Fullscreen API, который ориентирован на изображения, видео и игры, исполняемые в родительском контейнере.

Кстати говоря, вход в полноэкранный режим сопровождается сообщением в верхней части экрана, в котором говорится, что при нажатии клавиши Escape вы вернетесь в стандартный режим. Мы увидим сообщение если раскроем на весь экран видео на YouTube, например.

Если вы собираетесь использовать ПК :fullscreen, то помните, что браузеры стилизуют этим элементы очень по-разному. Кроме того, вы будете иметь дело с вендорными префиксами не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку screenfull.js от Hernan Rajchert, которая сглаживает большинство причуд браузеров.

Fullscreen API выходит за рамки данной статьи, но вот фрагмент кода, который будет работать в браузерах на основе WebKit и Blink.

HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1><button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

h1:fullscreen {    background: orange;}

Demo:

Получите значение атрибута псевдоэлемента:

Получить значение атрибута псевдоэлемента можноwindow.getComputedStyle()Метод получения объекта объявления стиля CSS псевдоэлемента. Затем используйте метод getPropertyValue или напрямую используйте доступ «ключ-значение» для получения соответствующего значения свойства.

Синтаксис: window.getComputedStyle (element )

Дайте каштан:

Примечания:

И getPropertyValue (), и прямой доступ к объекту «ключ-значение» могут обращаться к объекту CSSStyleDeclaration. Различия между ними:

Псевдоэлемент по умолчанию — «display: inline». Если атрибут отображения не определен, даже если значение атрибута ширины явно установлено в CSS на фиксированный размер, например «100 пикселей», значение ширины, полученное в конце, все равно будет «автоматическим». Это связано с тем, что ширину и высоту встроенных элементов нельзя настроить. Решение состоит в том, чтобы изменить атрибут display псевдоэлемента на «block», «inline-block» или другое.

Появление выноски

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

Найдите в файле CSS селектор и добавьте следом за ним следующий стиль:

.pin:hover .popover {
    visibility: visible;
    opacity: 1;
}

У вас мог возникнуть вопрос, зачем мы скрыли выноску сразу двумя способами. Дело в том, что использования лишь одного из этих свойств будет недостаточно. Если убрать свойство и оставить только , то элемент не будет по-настоящему скрыт: да, он не будет виден для глаз, но его увидит скринридер, что иногда может мешать.

Если же убрать свойство прозрачности и оставить только , то мы не сможем добиться плавности при появлении элемента, поскольку свойство transition не действует на свойство . Именно поэтому мы использовали сразу два свойства для скрытия выноски.

Кстати о плавности. Если вы сейчас обновите страницу и наведете курсор на точку, то увидите, что выноска появляется, но делает это резко. Настало время обратиться к свойству . Найдите селектор и добавьте к нему такую строку:

transition: all 0.2s ease-in-out;

Теперь выноска появляется плавно: свойство переходит от значения к значению за 200 миллисекунд, а скорость движения анимации соответствует функции ease-in-out.

Идем дальше. Когда мы рассказывали о свойстве , то упоминали о том, что его удобно применять для небольшой задержки выпадающего меню перед его исчезновением, чтобы пользователь успевал навести курсор на ссылку меню. Не лишним будет применить этот эффект и для выноски, чтобы она исчезала с легкой задержкой. Для этого добавьте еще одно значение к свойству для селектора — перед точкой с запятой:

transition: all 0.2s ease-in-out 0.5s;

Но это еще не всё. Сейчас задержка появления выноски срабатывает в обоих направлениях — когда курсор наводится и когда отводится. Чтобы оставить задержку только для второго случая, допишите следующую строку к селектору :

transition-delay: 0s;

Сохраните изменения и обновите страницу в браузере. Теперь всё работает правильно: выноска появляется плавно и без задержки, а исчезает так же плавно, но с задержкой в полсекунды.

Нам осталось поработать еще над одной деталью. На этот раз мы вспомним свойство и его функцию вращения , чтобы добавить еще один визуальный эффект при появлении выноски. Она будет словно разворачиваться лицом к зрителю в процессе появления, а затем так же исчезать.

В состоянии невидимости выноска будет развернута на 90 градусов по оси Y. Допишите следующий стиль к селектору :

transform: rotateY(90deg);

При наведении курсора на точку города выноска должна возвращаться в свое нормальное положение. Для этого добавьте строку ниже к стилю для селектора :

transform: rotateY(0deg);

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

Правило @keyframes

CSS3-анимация состоит из двух компонентов: сначала идет объявление@keyframes, которое затем используется в свойстве animation элемента.

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени.

Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.

Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

Синтаксис

    @-webkit-keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}
@keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}

Теперь, объявив @keyframes, мы можем ссылаться на него в свойстве animation:

    h1 {
font-size: 3.5em;
color: darkmagenta;
-webkit-animation: shadow  2s infinite ease-in-out;
animation: shadow  2s infinite ease-in-out;
}

Например: блестящая кнопка

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

Для начала немного HTML:

Oooh SHINY

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

Добавляем эффект блеска

Эффект яркого блеска представляет собой линейный градиент, который проходит через кнопку. Чтобы создать это мы используем псевдоэлемент и первоначальное положение будет вне кнопки:

Эффект блеска состоит из градиента от цвета кнопки до белого и обратно. На данном этапе эффект находится за пределами кнопки.

Нам нужно скрыть слой с блеском так, чтобы он показывался только при наведении курсора мыши. Для этого используем свойство со значением . Поскольку псевдоэлемент находится внутри кнопки, это означает, что это позиционирование вне ее предела и его не будет видно.

Я поместил некоторые другие стили кнопке, что придаст ей собственный вид. Единственное, что следует отметить, то это применение . Я добавил это свойство для абсолютного позиционирования псевдоэлемента и это будет находиться внутри кнопки. Указания позиции: абсолютно размещенный элемент будет находиться в пределах родительского элемента.

Before спешит на помощь

Если позволяет дизайн, можно попытаться обойтись и без картинки. В основном это касается списков в контентной области сайта, которые бывают оформлены достаточно просто, например маркером выступает стрелочка (→), тире (—) или, скажем, черный кружок (•). В общем, если подобрать подходящий под маркер спецсимвол, его смело можно использовать!

Естественно, если бы вставлять спецсимвол в <li> приходилось руками, об этой теме можно было бы забыть навсегда. Но на помощь к нам приходит псевдоэлемент before, который позволит этот процесс автоматизировать. Этот псевдоэлемент понимают почти все браузеры (ff, opera, chrome, ie8), а для ie6-7 cуществует решение с применением expression.

Вот такой несложный код обеспечит вставку спецсимвола «короткое тире»:

li{
	//z-index: expression(runtimeStyle.zIndex = 1, this.innerHTML = "&ndash;" + this.innerHTML) /* хак для ие6 и 7 */
}

li:before{
	content: "\2013";
}

Само собой в боевых условиях вместо хаков создаем отдельный CSS, который подключаем условным комментарием.

Единственная хитрость заключается в том, что нужно знать код спецсимвола (можно посмотреть у нас в HTML справочнике). В expression спецсимволы можно писать цифровым или мнемоническим кодом, а в свойстве content ставим слеш и шестнадцатеричный код (переводим в шестнадцатеричную систему обычный числовой код).

Рисуем маркеры сами

Если маркер выглядит, например так:

то есть его можно нарисовать с помощью background-color и/или border, то тут тоже можно обойтись без картинки:

li{
	//z-index: expression(runtimeStyle.zIndex = 1, this.innerHTML = "<div class='listMarkerBackColor'></div>" + this.innerHTML) /* хак для ие6 и 7 */
}

li:before,
.listMarkerBackColor{
	background-color:#539127;
	width:7px;
	height:7px;
	content:"";
	float:left;
	margin:4px 4px 0 0;
	overflow:hidden;
}
* html .listMarkerBackColor{
	margin-right:1px; /* исправляем маленткий косяк в IE6 */
}

6-8
3
9.5-10
3
4

Характеристики вставляемого контента

Как упоминалось раньше, контент, который вставляется невидим
на html странице. Он видим только в CSS.

Также, вставляемый контент, по умолчанию будет строчным элементом.
Чтобы сделать его блочным достаточно указать display:block;, указать ширину и высоту блока. Это очень удобно при создании
вкладок, кнопок и т.д.

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

Вставляем не только
текстовый контент

В свойстве content, не обязательно должен
быть текст, также может быть картинка. Вы можете прописать URL картинки,
как это делается в background.

p:before {
content: url(image.jpg);
}

Важно
помнить, что нельзя URL брать в кавычки, это будет значить что контент является
текстом

Популярно о псевдоэлементах :Before и :After

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

Всего существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after. В этой статье подробно рассмотрены последние два, как наиболее полезные.

Синтаксис и поддержка браузерами

Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов:

Но в любом случае, современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.

Пример использования псевдоэлементов

Элементы :before и :after не будут сгенерированы, т.е. не будут видны в коде страницы, поэтому они и называются псевдоэлементами.

Использование

Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после. Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.

Простой пример: необходимо добавить кавычки для цитаты:

Стилизация псевдоэлементов

К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.

Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить display: block:

Также внутри псевдоэлемента можно использовать картинку вместо обычного текста, и даже добавлять фоновое изображение.

В этом примере свойство content содержит пустую строку, это необходимо, иначе псевдоэлемент не будет правильно отображаться.

Использование вместе с псевдоклассами

Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:

Добавление transition-эффекта

Также можно применить свойство transition для плавного изменения цвета кавычек:

К сожалению, это нормально работает только в последних версиях Firefox.

Посмотреть демонстрацию примера из этой статьи.

Источник

Расширенный синтаксис

Вы можете оставить свойство content пустым, и создать блок.

#example:before {
content: "";
display: block;
width: 100px;
height: 100px;
}

Если вы удалите свойство content, псевдоэлемент
работать не будет. По крайней мере, это совойство должно оставаться пустым.

Вы должны знать, что некоторые используют эти элементы в
виде ::before и ::after. Разницы никакой нет, браузеры поддерживают такой
синтаксис также.

Еще один момент использования. Вы можете применить
псевдоэлемент к каждому из html элементов.

:before {
content: "#";
}

Но это используется в личных целях. Этот код вставляет # перед
контентом в каждом DOM элементе. Даже если вы удалите все теги на странице, вы
сможете видеть два символа ## на странице. Это используется, сам не знаю для
чего, но такое есть.

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

С CSS мы можем задать псевдоэлемент используя или . Псевдоэлемент находится внутри вашего элемента, между элементом и любым содержимым. Так как он действует как элемент самостоятельно, то может быть стилизованым, позиционируемым и многое другое. Код выглядит приблизительно вот так:

На этой стадии наш элемент имеет два присоединенных виртуальных элемента и мы можем стилизовать их по мере необходимости.

Обратите внимание на «::» вместо «:»

Обычно мы используем двойное двоеточие :: для обозначения псевдоэлементов (в отличие от псевдоклассов, как :hover, :first-child). Если хотите поддержку IE8, то лучше заменить на одиночный . Другие браузеры и новые версии IE поддержуют двойные.

Не забудьте о «content»

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

Это дает убедиться, что элемент виден на экране.

Примеры использования псевдоэлементов after и before

1. Применение CSS псевдоэлементов и для оформления цитаты.

HTML разметка цитаты:

<div class="blockquote">Текст цитаты...</div>

CSS код для оформления цитаты:

.blockquote {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
  padding: 5px 32px;
  background-color: #e0f2f1;
  color: #004d40;
  border-radius: 4px;
}

.blockquote::before {
  content: '\201e';
  position: absolute;
  top: -16px;
  left: 6px;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
}

.blockquote::after {
  content: '\201c';
  position: absolute;
  right: 6px;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
}

2. Пример использования псевдоэлемента для разделения элементов в хлебных крошках.

HTML структура хлебных крошек:

<ol class="breadcrumb">
  <li class="breadcrumb__item"><a href="#">Home</a></li>
  <li class="breadcrumb__item"><a href="#">Blog</a></li>
  <li class="breadcrumb__item breadcrumb__item_active" aria-current="page">Single post</li>
</ol>

CSS код хлебных крошек:

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  color: #b39ddb;
  background-color: #ede7f6;
  border-radius: .25rem;
}

.breadcrumb__item>a {
  text-decoration: none;
  color: #673ab7;
}

.breadcrumb__item>a:hover {
  text-decoration: none;
  color: #311b92;
}

.breadcrumb__item+.breadcrumb__item {
  padding-left: 8px;
}

/* добавление разделителя между элементами хлебных крошек с помощью псевдоэлемента before */
.breadcrumb__item+.breadcrumb__item::before {
  display: inline-block;
  padding-right: 8px;
  color: #673ab7;
  content: "•";
}

Изображние хлебных крошек:

3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.

Псевдоэлемент используется для затемнения изображения, а — для отображения картинки «Запустить».

HTML код ссылки:

<a href="#" class="image__over"></a>

CSS код с использованием after и before:

.image__over {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 56.25%;
  background: url(buterfly.jpg) no-repeat;
  background-size: cover;
  border-radius: 4px;
}

.image__over:hover::before,
.image__over:focus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(48, 53, 71, .4);
  cursor: pointer;
}

.image__over:hover::after,
.image__over:focus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 72px 64px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: -32px;
  margin-top: -36px;
  cursor: pointer;
}

4. Пример, аналогичный предыдущему, за исключением того что изображение будем задавать с помощью элемента .

HTML разметка этого примера:

<a href="#" class="image__over">
  <img src="buterfly.jpg" alt="">
</a>

CSS код:

.image__over {
  display: inline-block;
  font-size: 0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.image__over>img {
  max-width: 400px;
}

.image__over:hover::before,
.image__over:focus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(48, 53, 71, .4);
  cursor: pointer;
}

.image__over:hover::after,
.image__over:focus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64px;
  width: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 72px 64px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: -32px;
  margin-top: -36px;
  cursor: pointer;
}