Псевдоэлементы css before after: &colon;&colon;before (&colon;before) — CSS | MDN — Вебджем.рф

Содержание

Вся правда о псевдоэлементах :before и :after | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Рассмотрим сегодня псевдоэлементы, а именно разберемся с :before и :after. Что такое псевдоэлемент и как он отличается от псевдокласса? Как :before и :after реализованы в CSS? Вы наверняка видели их к примеру, в стилях уже готовых меню, но никогда не вдавались в подробности, для чего они нужны, а просто брали и использовали меню. Настало время расставить все по своим местам и научиться пользоваться псевдоэлементами самостоятельно.

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

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

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

Более подробно о псевдоклассах поговорим в одной из следующих статей.

Немного теории о псевдоэлементах

Псевдоэлементы появились еще в рекомендации CSS1, однако :before и :after, речь о которых пойдет дальше были выпущены в CSS2.1. Что касается синтаксиса:

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

Вначале идет имя селектора, после пишется двоеточие, а затем следует имя псевдоэлемента. Изначально для обозначение псевдокласса и псевдоэлемента применялось одно двоеточие, однако с приходом CSS3 для того, чтобы разделять где псевдокласс, а где псевдоэлемент для последнего ввели два двоеточия (::before и ::after). Однако если продолжать использовать одно, ошибкой это не будет (кроме ::selection — всегда с двумя двоеточиями).

Список всех псевдоэлементов:

Имя	Описание
:before	применяется для вставки контента перед элементом;
:after	применяется для вставки контента после элемента;
::first-letter	представляет собой первый символ первой строки текста внутри элемента;
::first-line	представляет собой первую линию форматированного текста;
::selection	представляет собой часть документа, которая была выделена мышкой.

Как это работает?

Как говорилось выше, псевдоэлементы :before и :after создают дополнительные элементы до или после содержимого основного элемента, так что когда мы используем эти псевдоэлементы, технически это равнозначно следующей разметке.

1
2
3
4
5

<p>
<span>:before</span>
Здесь основной контент.
<span>:after</span>
</p>

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

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

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

Окантуем текст цитаты кавычками. Разметка HTML следующая:

1
2
3

А стили выглядят пока так:

1
2
3
4
5
6

blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}

Стилизация кавычек

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

Если мы хотим указать ширину и высоту псевдоэлемента, мы должны использовать значение block для свойства display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px;

/** определяем как блочный элемент **/
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottombottom: 40px;
border-radius: 25px;

/** определяем как блочный элемент **/
display: block;
height: 25px;
width: 25px;
}

С изображением

Мы также можем использовать изображение (а не только простой текст) в качестве контента псевдоэлемента.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

blockquote:before {
content: » «;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;

background: url(images/quotationmark.png) -3px -3px #ddd;

display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: » «;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottombottom: 40px;
border-radius: 25px;

background: url(images/quotationmark. png) -1px -32px #ddd;

display: block;
height: 25px;
width: 25px;
}

Однако, как Вы можете видеть на приведенном выше отрывке, мы все еще объявляем свойство content и на этот раз, в качестве значения пустая строка. Content является обязательным свойством, в противном случае псевдоэлемент не будет работать вообще.

Комбинируем с псевдоклассами

Мы можем использовать псевдоклассы наряду с псевдоэлементами в одном правиле CSS, например, если мы хотим сделать фон кавычек немного темнее, при наведение курсора мыши на цитату.

1
2
3

blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}

Добавим Transition эффект

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

1
2
3
4

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

Более подробно об эффекте transition в уроке — CSS слайдер изображений с эскизами

Вы можете посмотреть, что у нас получилось 🙂

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или подпишитесь на почтовую рассылку. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Псевдоэлемент ::after | CSS справочник

CSS селекторы

Значение и применение

Псевдоэлемент ::after добавляет определённое содержимое после каждого указанного элемента. Псевдоэлемент ::after используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.

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

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

Поддержка браузерами

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
::after	4.0	3.5	7.0*	3.1	9.0*	12.0

CSS синтаксис:

::after {
content : " ";
блок объявлений;
}

Версия CSS

CSS2

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

Рассмотрим пример, в котором после каждого блока с изображением и после каждого абзаца будет генерироваться (добавляться) определенная фраза:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования псевдоэлемента ::after</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
div. omg::after { /* выбираем все элементы <div> с классом omg и добавляем после каждого содержимое */
content: "Спасибо за внимание!"; /* содержимое, которое будет добавлено */
} 
p::after { /* выбираем все элементы <p> и добавляем после каждого содержимое */
content: " - Ваш ответ"; /* содержимое, которое будет добавлено */
} 
</style>
</head>
	<body>
		<div class = "omg">
			<img src = "nich.jpg" alt = "nich">
		</div>
		<div class = "omg">
			<img src = "nich.jpg" alt = "nich">
		</div>
		<p>Нет</p>
		<p>Да</p>
	</body>
</html>

В этом примере мы указали фиксированную ширину для всех изображений (ширина и высота 100 пикселей). Кроме того, мы выбрали все элементы <div> с классом omg и добавили после них определенную фразу. После абзацев (элементы <p>) также добавляется определенная фраза.

Обращаю Ваше внимание, что к таким элементам как <input> и <img> напрямую псевдоэлемент ::after применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>.

Результат нашего примера:

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

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования счетчиков в CSS.</title>
<style> 
 a:after {/* Псевдоэлемент :after добавляет содержимое, указанное в свойстве content после каждого элемента <а> */
content : ""attr(title)""; /* между всеми тегами <a></a> автоматически будет проставляться значение атрибута title */
}
</style>
</head>
<body>
<a href = "http://basicweb.ru" title = "Basicweb.ru"></a>
</body>
</html>

Пример добавления и изменения кавычек в тексте, используя CSS свойства content, quotes, а также псевдоэлементов :before и :after:

<!DOCTYPE html>
<html>
<head>
<title>Пример добавления кавычек к тексту в CSS</title>
<style> 
* {
quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */
}
p:before {content : open-quote;}  /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */
 p:after {content : close-quote;}  /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */
</style>
</head>
<body>
<q>Обычная цитата<q>
<q>Это <q>ЦИТАТА</q> внутри цитаты</q>
<p>Параграф, к которому, используя псевдоклассы добавлены кавычки. </p>
</body>
</html>

Пример добавления и изменения кавычек в тексте.CSS селекторы

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

Когда я начал изучать интерфейсную разработку, я действительно ненавидел CSS и дизайн (я до сих пор ненавижу дизайн), но мой CSS немного лучше. Одной концепции, которую я не понял, были псевдоэлементы CSS ::after и ::before .

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

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

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

Некоторые псевдоэлементы:

:: первая буква (ранее : первая буква )
:: первая строка (ранее : первая строка )
:: до (ранее : до )
:: после (ранее : после )

Первоначально псевдоэлементы создавались с использованием одного двоеточия (т.е. :before ), но CSS3 ввел новое соглашение: одно двоеточие для псевдоклассов, таких как

hover , active и т. д. и двойное двоеточие для псевдоэлементов. Это было введено, чтобы отличать псевдоклассы от псевдоэлементов.
Узнайте больше о спецификации CSS3 здесь.
Браузер поддерживает :до и :после , но рекомендуется использовать двойное двоеточие.

Перед псевдоэлементом

До 9Псевдоэлемент 0004 создает псевдоэлемент перед первым дочерним элементом выбранного элемента, просто он создает элемент перед содержимым выбранного элемента. Псевдоэлементы имеют свойство содержимого, которое можно использовать для вставки сгенерированного содержимого, изображения или строки. Они должны иметь атрибут содержимого CSS, иначе значение содержимого по умолчанию не установлено.

Ниже приведены несколько простых демонстраций псевдоэлемента

 ::before .
 В первом примере демонстрации мы использовали  ::before , чтобы добавить строку перед тегом  p , а также оформить ее как обычный элемент HTML. 
 Во втором  ::before  используется для добавления стрелки маркера в список, стрелка маркера представляет собой значок Font Awesome.
 После псевдоэлемента 
 Псевдоэлемент  после  очень похож на  до  , единственное отличие состоит в его расположении после последнего дочернего элемента выбранного элемента/после содержимого выбранного элемента.

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

Также можно комбинировать псевдоэлементы. Примечание. В соответствии со спецификацией CSS3 для каждого селектора может отображаться только один псевдоэлемент, но вы можете вызывать псевдоэлементы дважды для одного и того же селектора. Например,

 selector::before{
    .....
 }
 селектор::после{
    .....
 }

Войти в полноэкранный режимВыйти из полноэкранного режима

Простая демонстрация, демонстрирующая, что это ниже

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

Эта статья представляет собой простое объяснение того, что такое псевдоэлементы и что они делают, но они намного мощнее, чем то, что показано в демонстрациях выше.

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

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

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

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

тега, которые выглядят так:

...

CSS

...

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

с помощью псевдоэлемента, подобного этому…

 п:: после {
  content: "Это действительно круто!";
}

…теги

, отображаемые в браузере, на самом деле будут выглядеть следующим образом:

 CSS действительно классный!

Хотя действительно классный! часть не является включенной в HTML, псевдоэлемент ::after вставил этот дополнительный контент после всех элементов p .

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

Чем они отличаются от псевдоклассов, о которых мы только что узнали? В статье «Псевдоклассы против псевдоэлементов » из Web’а содержится полезный совет, как отличить одно от другого:

«Если вам все еще трудно запомнить разницу, просто подумайте о том, что на самом деле означают названия «псевдоэлемент» и «псевдокласс». документ с «настоящими». Псевдоклассы похожи на «фальшивые» классы, которые применяются к элементам при определенных условиях, очень похоже на то, как вы манипулируете классами элементов с помощью JavaScript».

В настоящее время поддерживается 5 псевдоэлементов:

::after вставляет содержимое после указанного элемента.
::before вставляет содержимое перед указанным элементом.
::first-letter выбирает первую букву указанного элемента.
::first-line выбирает первую строку указанного элемента.

Псевдоэлементы css before after: ::before (:before) — CSS | MDN