Css before, after и другие псевдоэлементы

Псевдоэлементы :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 будут отличаться.

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

Какие браузеры поддерживают :before и :after?

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

Chrome 2+,

Firefox
3.5+ (3.0 имеет частичную поддержку),

Safari
1.3+,

Opera 9.2+,

IE8+ (С
небольшими багами),

А также много других мобильных браузеров.

Существует только одна проблема (надеюсь это не новость для
вас) IE6 и IE7, которые не поддерживают
псевдоэлементы. Если ваша аудитория пользователей использует такие браузеры,
придется помучится или просто предложить им обновить браузер.

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

Дальше: Примеры htaccess: 8 изумительных примеров .htaccess файлов

Что такое псевдоэлемент и его назначение

Псевдоэлемент — это дополнение к селектору, с помощью которого можно стилизовать элемент, не определённый в структуре HTML документа. Добавляется он к селектору c помощью символов , т.е. так .

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

Но если проект не требует поддержку браузера Internet Explorer 8, то рекомендуется в CSS коде для определения псевдоэлементов писать два двоеточия. В противном случае необходимо использовать одно двоеточие, т.к. Internet Explorer 8 не поддерживает запись с .

Обратите внимание, что псевдоэлементы не добавляются в DOM. Поэтому получить псевдоэлемент с помощью JavaScript и с использованием библиотеки jQuery нельзя

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

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

Как работать с псевдоэлементом 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 файле.

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

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

В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).

На момент написания статьи только Firefox (с вендорным префиксом -moz-dir()) поддерживает ПК :dir. Очень похоже, что скоро это изменится. Поэтому в примере показаны оба варианта — с префиксом и без.

Заметка: Объединение в одном правиле версии с префиксом и без работать не будет. Нужно создать два отдельных правила.

Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.

HTML:

<article dir="rtl">    <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p></article>

CSS:

/* prefixed */article :-moz-dir(rtl) {    color: orange;}/* unprefixed */article :dir(rtl) {    color: orange;}

Параграф ниже написан на английском (слева направо). Текст будет синим.

HTML:

<article dir="ltr">    <p>If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p></article>

CSS:

/* prefixed */article :-moz-dir(ltr) {    color: blue;}/* unprefixed */article :dir(ltr) {    color: blue;}

Demo:

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

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

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

:pseudo-class-name

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

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

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

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

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

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

: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» или другое.

Псевдоэлементы :Before и :After со шрифтами иконками

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

Я пересмотрел несколько шрифтов-конок и остановился на Awesome. На мой взгляд, здесь собраны более красивые иконки и их большой выбор.

Со всеми иконками вы можете ознакомиться на официальном сайте Awesome. Там же вы найдёте и множество примеров по применению псевдоэлементов.

Итак, для того чтобы использовать псевдоэлементы :Before и :After с контентом в виде шрифтов-иконок. Необходимо организовать подключение к базе этих самых иконок.

Шаг 1.

Подключаем базу шрифтов. Для этого в заголовок сайта (файл header.php) необходимо вставить вот такой код:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Для этого открываем административную панель WP – «Внешний вид» — «Редактор» — «Заголовок/header.php»

Подключаем шриф

Шаг 2.

Теперь на сайте Awesome выбираете подходящие иконки и копируете код в исходный код вашего шаблона.

Вставляем иконки

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

Пример с иконками

Шаг 3.

А для того чтобы пример был более наглядный я добавил пару свойств css в файл style.css:

font-size: 15px;
color: crimson;

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

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

Хлебные крошки

Хлебные крошки представляют собой разновидность навигации по сайту, которая показывает путь к текущему документу и его положение в иерархии сайта (рис. 4).

Рис. 4. Хлебные крошки

Для создания такой навигации обычно применяется список <ul>, а внутри пунктов <li> вставляются ссылки на соответствующие разделы сайта. Чтобы отделить ссылки друг от друга, между ними вставляется разделитель, в качестве него обычно используется косая черта, но можно использовать стрелку и другие символы.

Разделитель добавляем через свойство content и селектор li + li::before, он выберет все элементы <li> кроме первого (пример 4).

Пример 4. Хлебные крошки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Хлебные крошки</title>
<style>
.breadcrumbs {
margin: 0; /* Убираем отступы */
padding: 10px; /* Поля вокруг текста */
background: #b2d235; /* Цвет фона */
}
.breadcrumbs li {
display: inline-block; /* Размещаем список по горизонтали */
}
.breadcrumbs a {
color: #fff; /* Цвет ссылок */
text-decoration: none; /* Убираем подчёркивание у ссылок */
}
.breadcrumbs li + li::before {
content: ‘/’; /* Разделитель ссылок */
padding: 0 7px; /* Расстояние вокруг разделителя */
}
</style>
</head>
<body>
<ul class=»breadcrumbs»>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Картинки</a></li>
<li><a href=»#»>Девушки</a></li>
</ul>
</body>
</html>

Что такое псевдоэлементы :Before и :After

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

Я увидел в них своего рода альтернативу css-спрайтам. На моей нынешней теме оформления я собрал элементы дизайна в спрайты. Это сократило время загрузки сайта.

Реализация css спрайтов

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

Генерация контента с помощью ::before и ::after

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

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

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

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

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

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

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

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

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

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

Нет

Да

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

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

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

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

Изменение цвета маркера через использование CSS свойства content и псевдоэлемента :before:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Изменение цвета маркера.</title>
<style> 
ul {
list-style : none; /* убираем маркеры у маркированного списка */
}
li:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */
content : "•"; /* вставляем содержимое, которое выглядит как маркер */
padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */
color : red; /* устанавливаем цвет шрифта */
}
</style>
</head>
<body>
<ul>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
</body>
</html>

Изменение цвета маркера через использование CSS свойства content.

Пример использования счетчиков в CSS через использование CSS свойств content, counter-reset, counter-increment и псевдоэлемента :before:.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования счетчиков в CSS.</title>
<style> 
body {
counter-reset : schetchik1; /* инициализируем счетчик №1 */
line-height : .3em; /* устанавливаем междустрочный интервал для всего документа */
}
h2 {
counter-reset : schetchik2; /* инициализируем счетчик №2 */
}
h2:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h2> */
counter-increment : schetchik1; /* определяем инкремент для глав с шагом 1 (значение по умолчанию) */
content : "Глава № " counter(schetchik1) ". "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h2>. Значение counter определяет счетчик   */
}
h3 {
margin-left : 20px; /* устанавливаем величину отступа от левого края элемента */
}
h3:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h3> */
counter-increment : schetchik2; /* определяем инкремент для статей с шагом 1 (значение по умолчанию) */
content : counter(schetchik1) "." counter(schetchik2) " "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h3>. Значение counter определяет счетчик   */
}
</style>
</head>
	<body>
		<h2>Название главы</h2>
		<h3>Статья</h3>
		<h3>Статья</h3>
		<h3>Статья</h3>
		<h2>Название главы</h2>
		<h3>Статья</h3>
		<h3>Статья</h3>
		<h3>Статья</h3>
		<h2>Название главы</h2>
		<h3>Статья</h3>
		<h3>Статья</h3>
		<h3>Статья</h3>
	</body>
</html>

Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<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 селекторы

:enabled

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

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

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

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

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

Demo:

:nth-child

ПК :nth-child выбирает один или более элементов в зависимости от их позиции в разметке.

Этот ПК является одним из самых универсальных и мощных вCSS.

Все :nth ПК принимают аргументы, которые представлены формулой в круглых скобках. Формула может быть одним числом, формулой со структурой an+b или словами odd(нечетный)/even(четный).

В формулах типа an+b:

a является числом (именуется целым числом);
n это буква n (другими словами мы действительно пишем букву n в формуле);
+ это оператор который может быть как плюсом (+) так и минусом (-);
b представляет собой целое число, как правило, но используется только там где необходим.

Используем греческий алфавит. Ниже есть несколько примеров, использующих одну HTML структуру:

<ol>    <li>Alpha</li>    <li>Beta</li>    <li>Gamma</li>    <li>Delta</li>    <li>Epsilon</li>    <li>Zeta</li>    <li>Eta</li>    <li>Theta</li>    <li>Iota</li>    <li>Kappa</li></ol>

CSS:

Давайте выберем второго ребенка. В этом случае только “Beta” будет оранжевой:

ol :nth-child(2) {    color: orange;}

Теперь выберем других детей, начиная со второго ребенка. И так, “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa” будут оранжевыми:

ol :nth-child(2n) {    color: orange;}

Выберем все четные дочерние элементы в списке:

ol :nth-child(even) {    color: orange;}

Давайте выберем каждого второго ребенка начиная с шестого. “Zeta,” “Theta” и “Kappa” будут оранжевыми:

ol :nth-child(2n+6) {    color: orange;}

Demo:

Причина:

Эта статья возникла в сообществе OSC, кто-то спросил, как использовать jq для получения псевдоэлементов. Моя первая мысль заключается в том, что мощный CSS-запрос должен иметь возможность получать псевдоэлементы.

Однако на самом деле CSS Query не может. То есть мы не можем получить псевдоэлемент: before через $ («: before»), $ (dom) .find («: before») или document.querySelector («: before»).

По этой причине мне нужно заново понять псевдоэлементы (псевдоэлементы). Почему вы не можете использовать JS для прямого получения псевдоэлементов?

Например, псевдоэлементы :: before и :: after используются для вставки содержимого в начало или конец элемента при визуализации CSS.Они не ограничены документом и не влияют на сам документ, а только на окончательный стиль. Этот добавленный контент не будет отображаться в DOM, а только добавлен в слой рендеринга CSS.

По факту,Псевдоэлементы могут отображаться браузером, но сами они не являются элементами DOM. Его нет в документе, поэтому JS не может напрямую управлять им.А селекторы jQuery основаны на элементах DOM, поэтому псевдоэлементы нельзя манипулировать напрямую.

Как управлять стилем псевдоэлемента?

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