Content css after: ::after — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Псевдоэлемент ::after | WebReference

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

По умолчанию ::after создаёт строчный элемент.

Синтаксис

Селектор::after { content: "текст" }
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>after</title> <style> p.new::after { content: «Новьё!»; /* Добавляемый текст */ color: #333; /* Цвет текста */ background-color: #fc0; /* Цвет фона */ font-size: 90%; /* Размер шрифта */ padding: 2px; /* Поля вокруг текста */ } </style> </head> <body> <h3>Истории</h3> <p>История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось.
</p> <p>История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.</p> </body> </html>

В данном примере в конце текстового абзаца, помеченного классом new, выводится определённый текст для привлечения внимания. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдоэлемента ::after

Примечание

В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов. В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.

Спецификация

СпецификацияСтатус
CSS TransitionsРабочий проект
CSS AnimationsРабочий проект
Selectors Level 3Рекомендация
CSS Level 2 (Revision 1)Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

 
:after8121441
::after9125741. 5
 
:after		1141
::after1171
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

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

См. также

  • content
  • Аккордеон меню
  • Добавление тени
  • Комплексные селекторы
  • Не только текст
  • Подробнее о позиционировании
  • Псевдоэлемент ::before
  • Псевдоэлементы ::after и ::before

Рецепты

  • Как добавить всплывающую подсказку к тексту?
  • Как сделать подчёркивание заголовка?
  • Как сделать ссылку для скачивания?
  • Как сделать ссылку на адрес электронной почты?
  • Как указать язык сайта по ссылке?

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

CSS селекторы

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

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

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

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

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

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
::after4.03.57.0*3.19.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 Далее ❯


Пример

Вставить текст после содержимого каждого элемента

:

p::after {
  content: «- Запомнить это»;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор ::after вставляет что-то после содержимого каждого выбранного элемента(ов).

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

Используйте селектор ::before, чтобы вставить что-то перед содержимым.

Версия: CSS2

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
::после 4,0 9,0 3,5 3. 1 7,0

Синтаксис CSS

::after {
  объявления css ;
}

Дополнительные примеры

Пример

Вставка содержимого после каждого элемента

и стилизация вставленного содержимого:

p::after {
  content: «- Запомнить это»;
цвет фона: желтый;
красный цвет;
вес шрифта: полужирный;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Псевдоэлементы CSS

Справочник по селектору CSS: CSS ::before selector

❮ Предыдущий Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top5 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Content — Tailwind CSS

​Основное использование

​Настройка содержимого псевдоэлемента

Используйте утилиты content-{value} вместе с до и после для установки содержимого модификаторов вариантов ::до и ::после псевдоэлементов.

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

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

Более высокое разрешение означает больше, чем просто более качественное изображение. Благодаря дисплею Retina 6K Pro Display XDR дает вам почти на 40 процентов больше экранной площади, чем дисплей 5K.

 Более высокое разрешение означает больше, чем просто более качественное изображение. С сетчаткой
Дисплей 6K, Pro Display XDR дает вам
почти на 40 процентов больше площади экрана, чем у дисплея 5K.  Более высокое разрешение означает больше, чем просто более качественное изображение. С сетчаткой
Дисплей 6K,  
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR дает вам
почти на 40 процентов больше площади экрана, чем у дисплея 5K.

​Ссылка на значение атрибута

Эти утилиты для работы с контентом даже поддерживают функции CSS, такие как функция attr() , которую можно использовать для ссылки на значение, хранящееся в атрибуте:

​Использование пробелов и знаков подчеркивания

Поскольку пробел обозначает конец класса в HTML, замените любые пробелы в произвольном значении на знак подчеркивания:

Если вам нужно включить фактическое подчеркивание, вы можете сделать это, экранировав его обратной косой чертой:

​Условное применение

​Наведение курсора, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:before:content-['Hovering'] , чтобы применять утилиту before:content-['Hovering'] только при наведении.

 <дел>

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md:before:content-['Desktop'] для применения утилиты before:content-['Desktop'] только на экранах среднего размера и выше.

 <дел>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​Использование пользовательских значений

​Настройка темы

По умолчанию Tailwind предоставляет только утилиту content-none .