Учебник по CSS: до и после псевдоселекторов | Учебники по веб-разработке #33
Введение в HTML, CSS, JavaScript и как работают веб-сайты? | Учебники по веб-разработке #1
Учебник по HTML: установка VS Code и Live Server | Учебники по веб-разработке #2
Учебник по HTML: базовая структура веб-сайта | Учебники по веб-разработке #3
Учебник по HTML: заголовок, сценарий, ссылка и метатеги | Учебники по веб-разработке #4
Учебник по HTML: заголовки и абзацы | Учебники по веб-разработке #5
Учебник по HTML: теги Img и Anchor | Учебники по веб-разработке #6
Учебник по HTML: списки и таблицы | Учебники по веб-разработке #7
Учебник по HTML: формы и теги ввода | Учебники по веб-разработке #8
Учебник по HTML: встроенные и блочные элементы | Учебники по веб-разработке #9
Учебник по HTML: Идентификаторы и классы в HTML | Учебники по веб-разработке #10
Учебник по HTML: Объекты HTML | Учебники по веб-разработке #11
Учебник по HTML: семантические теги в HTML| Учебники по веб-разработке #12
Учебник по CSS: Введение в CSS | Учебники по веб-разработке #13
Учебник по CSS: Встроенный, внутренний и внешний CSS | Учебники по веб-разработке #14
Учебник по CSS: Селекторы в CSS | Учебные пособия по веб-разработке #15
Учебное пособие по CSS: Использование инструментов разработчика Chrome | Учебные пособия по веб-разработке #16
Учебное пособие по CSS: Шрифты в CSS | Учебники по веб-разработке #17
Учебник по CSS: Цвета в CSS | Учебники по веб-разработке #18
Учебник по CSS: границы и фон | Учебники по веб-разработке #19
Учебное пособие по CSS: блочная модель CSS, поля и отступы | Учебные пособия по веб-разработке #20
Учебное пособие по CSS: Float & Clear объяснил | Учебники по веб-разработке #21
Учебник по CSS: Стилизация ссылок и кнопок | Учебники по веб-разработке #22
Учебник по CSS: Создание меню навигации | Учебные пособия по веб-разработке #23
Учебное пособие по CSS: Свойство отображения CSS | Учебники по веб-разработке #24
Учебник по CSS: абсолютное, относительное, фиксированное и липкое положение в CSS | Учебники по веб-разработке #25
Проект 1: Создание веб-сайта тренажерного зала с использованием HTML5 и CSS3 | Учебники по веб-разработке #26
Учебник по CSS: Объяснение видимости и z-index | Учебные пособия по веб-разработке #27
Учебное пособие по CSS Flexbox на хинди | Учебники по веб-разработке #28
Учебник по CSS: единицы em, rem, vh и vw + Объяснение адаптивного дизайна | Учебные пособия по веб-разработке #29
Учебное пособие по CSS: объяснение медиа-запросов | Учебные пособия по веб-разработке #30
Учебное пособие по CSS: Дополнительные сведения о селекторах CSS | Учебники по веб-разработке #31
Учебное пособие по CSS: псевдоселекторы атрибутов и n-го потомка | Учебники по веб-разработке #32
Учебник по CSS: до и после псевдоселекторов | Учебные пособия по веб-разработке #33
Учебное пособие по CSS: тень блока и тень текста | Учебники по веб-разработке #34
Учебник по CSS: переменные и пользовательские свойства | Учебники по веб-разработке #35
Учебник по CSS: Создание анимации и ключевых кадров | Учебные пособия по веб-разработке #36
Учебное пособие по CSS: Создание переходов в CSS | Учебники по веб-разработке #37
Учебное пособие по CSS: преобразование свойств в CSS | Учебные пособия по веб-разработке #38
Создание проекта полностью адаптивного веб-сайта с использованием HTML и CSS на хинди | Учебники по веб-разработке #39
CSS Grid: введение и создание базовой сетки | Учебники по веб-разработке #40
CSS Grid: создание строк и пробелов в сетке | Учебники по веб-разработке #41
CSS Grid: объединение нескольких строк и столбцов в сетке | Учебники по веб-разработке #42
CSS Grid: Autofit & MinMax | Учебники по веб-разработке #43
CSS Grid: создание макетов с использованием области шаблонов сетки | Учебники по веб-разработке #44
Использование медиа-запросов с CSS Grid | Учебники по веб-разработке #45
Введение в JavaScript для внешнего и внутреннего интерфейса | Учебники по веб-разработке #46
Написание JavaScript в браузере и консоль разработчика | Учебники по веб-разработке #47
Переменные, типы данных и операторы в JavaScript | Учебники по веб-разработке #48
Строки в JavaScript | Учебники по веб-разработке #49
Строковые функции в JavaScript | Учебники по веб-разработке #50
Область действия, условия «если-иначе» и регистр переключения в JavaScript | Учебники по веб-разработке #51
Массивы и объекты в JavaScript | Учебники по веб-разработке #52
Функции в JavaScript | Учебные пособия по веб-разработке #53
Учебное пособие по JavaScript: Взаимодействие — Оповещение, Подсказка, Подтверждение | Учебники по веб-разработке #54
Учебник по JavaScript: циклы for, while, forEach, Do While | Учебники по веб-разработке #55
Учебник по JavaScript: Навигация по DOM | Учебники по веб-разработке #56
Учебник по JavaScript: события и прослушивание событий | Учебники по веб-разработке #57
Учебник по JavaScript: setInterval и setTimeOut | Учебники по веб-разработке #58
Учебник по JavaScript: дата и время в JavaScript | Учебники по веб-разработке #59
Учебник по JavaScript: стрелочные функции в JavaScript | Учебники по веб-разработке #60
Учебник по JavaScript: математический объект в JavaScript | Учебники по веб-разработке #61
Учебник по JavaScript: работа с JSON в JavaScript | Учебные пособия по веб-разработке #62
Учебное пособие по серверной части: Введение и установка Node.
Js | Учебные пособия по веб-разработке #63
Учебное пособие по серверной части: модули Node.Js с примерами | Учебные пособия по веб-разработке #64
Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #65
Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #66
Учебное пособие по серверной части: создание пользовательской серверной части с использованием NodeJs | Учебники по веб-разработке #67
Backend Tutorial: Создание пользовательских модулей в узле с помощью NodeJs | Учебные пособия по веб-разработке #68
Учебное пособие по серверной части: npm: Учебное пособие по диспетчеру пакетов Node | Учебные пособия по веб-разработке #69
Учебное пособие по серверной части: установка Express и Postman | Учебные пособия по веб-разработке #70
Учебное пособие по серверной части: написание нашего первого экспресс-приложения | Учебные пособия по веб-разработке #71
Учебное пособие по серверной части: статические файлы и установка механизма шаблонов Pug | Учебники по веб-разработке #72
Backend Tutorial: Использование необработанного HTML в шаблонизаторе Pug | Учебные пособия по веб-разработке #73
Учебное пособие по серверной части: Завершение серверной части NodeJs нашего веб-сайта Gym | Учебные пособия по веб-разработке #74
Учебное пособие по серверной части: танцевальный веб-сайт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #75
Учебное пособие по серверной части: разработка карт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #76
Учебное пособие по серверной части: веб-сайт Continuing Dance с использованием Pug + NodeJs | Учебники по веб-разработке #77
Backend Tutorial: Добавление спонсорского раздела с помощью Pug + NodeJs | Учебные пособия по веб-разработке #78
Учебное пособие по серверной части: добавление контактной формы с помощью Pug + NodeJs | Учебные пособия по веб-разработке #79
Учебное пособие по MongoDb: Введение в MongoDb + установка | Учебные пособия по веб-разработке #80
Учебное пособие по MongoDb.
Вставка данных в базу данных Mongo | Учебные пособия по веб-разработке #81
Учебное пособие по MongoDb. Поиск/запрос данных из базы данных Mongo | Учебники по веб-разработке #82
Учебное пособие по MongoDb. Удаление данных из базы данных Mongo | Учебные пособия по веб-разработке #83
Учебное пособие по MongoDb. Обновление данных из базы данных Mongo | Учебники по веб-разработке #84
MongoDb Tutorial: MongoDb Compass и установка Mongoose | Руководства по веб-разработке #85
MongoDb Tutorial: Использование Mongoose в NodeJs | Учебники по веб-разработке #86
Отображение случаев заражения коронавирусом на карте мира — интерактивная информационная панель с использованием JavaScript и MapBox
Backend Tutorial: Сохранение данных в базе данных с помощью Pug + NodeJs | Учебные пособия по веб-разработке #88
Учебное пособие по хостингу: Где разместить свой веб-сайт? | Учебные пособия по веб-разработке #89
Учебное пособие по хостингу: создание нашего первого VPS | Учебные пособия по веб-разработке #90
Учебное пособие по хостингу: установка Putty + основные команды Linux | Учебные пособия по веб-разработке #91
Учебное пособие по хостингу: Установка веб-сервера Apache2 на VPS | Учебные пособия по веб-разработке #92
Учебное пособие по хостингу: информационный веб-сайт CoronaVirus с хостингом | Учебники по веб-разработке #93
Учебное пособие по хостингу: использование Filezilla и WinSCP для загрузки файлов | Учебные пособия по веб-разработке #94
Учебное пособие по хостингу: привязка домена к серверу веб-хостинга | Учебные пособия по веб-разработке #95
Учебное пособие по хостингу: размещение нескольких веб-сайтов на одном сервере хостинга | Учебные пособия по веб-разработке#96
Учебное пособие по хостингу: развертывание приложений NodeJs в рабочей среде на Linux VPS | Учебники по веб-разработке#97
Установка MongoDb и размещение нашего танцевального веб-сайта на Ubuntu VPS | Учебники по веб-разработке #98
Получите бесплатный SSL-сертификат https для вашего домена на Ubuntu VPS | Учебники по веб-разработке #99
Учебник по Git: Как загрузить свои проекты на Git и GitHub | Учебники по веб-разработке #100
Прозрачная форма входа с использованием HTML и CSS | Учебники по веб-разработке #101
Я создал приложение для чата в реальном времени с использованием NodeJs и SocketIO
Создание адаптивного веб-сайта с использованием HTML, CSS и JavaScript на хинди
Аналоговые часы с использованием чистого HTML, CSS и JavaScript
Анимация движущегося автомобиля Lamborghini с использованием чистого HTML, CSS и JavaScript
Я создал экшн-игру на чистом HTML, CSS и JavaScript Шаблон CheatSheet с использованием HTML, CSS и JavaScript
Программирование игры в змейку на JavaScript
Я создал Windows 11 с использованием HTML, CSS и JavaScript
Что до и после в CSS, в чем разница
Представьте, что вы работаете над проектом, и у вас есть доступ только к файлам CSS, вы не можете добавлять какие-либо элементы HTML.
Это может иметь место при работе над более крупными проектами, где некоторый код генерируется динамически, и вам просто нужно настроить некоторые стили с помощью CSS.
Псевдоэлементы — это фиктивные элементы, которых нет внутри DOM, но они позволяют добавить несуществующий элемент и стилизовать его вокруг выбранного элемента. Псевдоэлементы могут появляться в документе двумя способами: :after (::after) и :before (::before) 9.0228
Его название поясняет, где его можно использовать. CSS before размещает себя перед всем остальным в селекторе, а CSS after размещает себя после всего остального в элементе. Это означает, что перед первым элементом селектора и после будет последний элемент внутри селектора . Псевдоэлементы могут использоваться с несамозакрывающимися тегами .
Его CSS можно просто применить с помощью правила, использующего : или :: (Новые браузеры поддерживают :: )
Используя эти простые псевдо-элементы , мы можем добавить еще 2 слоя стиля к выбранному элементу HTML DOM.
Результат, который мы можем получить с использованием этих элементов, можно увидеть ниже.
НАЖМИТЕ В ЛЮБОМ МЕСТЕ ОКНА
Базовый синтаксис CSS до и после
Синтаксис очень прост. Используйте его после селектора и добавьте к нему хотя бы атрибут содержимого.
/* CSS3 */
div::before{content:'';}
div::after{content:'';}
/* CSS2 */
div:before{content:'';}
div:after{content:'' ;}
Что такое контент в CSS?
Свойство Content создает содержимое во время рендеринга. Сгенерированный контент не является частью DOM.
После добавления атрибута содержимого элемент появится. Это может быть проверено инспектором хрома.
Речь не об этом. Свойство Content может принимать и другие значения, кроме пустого.
Допустимые значения:
содержимое: нормальный|нет|счетчик|атрибут| строка |открытая кавычка|закрытая кавычка|без открытой кавычки|без закрытой кавычки| url |начальный|наследовать;
- нормальный : Значение по умолчанию (нет)
- нет : Элемент не отображается.
- счетчик : Может отображать приращения числа
- attr : Отображает значение любого атрибута HTML.
- строка : любая строка или значения и символы Юникода.
- открытая кавычка|закрытая кавычка|без открытой кавычки|без закрытой кавычки : Отображает символ кавычки по умолчанию / удаляет символ кавычки.
- URL-адрес : Загружает URL-адрес изображения для отображения изображения.
Мы будем использовать тот же синтаксис, который описан выше, и скомбинируем некоторые другие классы css, чтобы показать несколько более практических примеров.
.parent{ position:relative}
.parent::before{content:'2605';}
HTML:
Некоторый текст
Некоторый текст со звездочкой перед звездочкой
Еще немного звездочек только CSS
Вот что у нас есть всего 2 строки кода.
Редактировать пример
Этот простой фрагмент кода CSS вместе с HTML даст нам приемлемые звездочки. Используя дополнительный CSS, мы можем сделать его лучше.
.parent{ position:relative}
.parent::before{content:'2605'; должность: родственница; отступы справа: 10 пикселей; оранжевый цвет; размер шрифта: 18px; }
Тот же пример с добавленным кодом CSS.
Редактировать пример
CSS ::after пример:Для простоты я просто поменяю местами ::before на ::after для нашего следующего примера:
.parent{ position:relative}
. родитель :: после {содержание: '2605'; должность: родственница; отступы справа: 10 пикселей; оранжевый цвет; размер шрифта: 18px; }
HTML останется прежним:
Некоторый текст
Некоторый текст со звездочкой после звездочки
Еще немного CSS только звездообразных форм
Вот что у нас получится, если мы поменяем до и после.
Редактировать пример
Надеюсь, что это звездное размещение объясняет все о до и после в CSS. С той же концепцией мы можем использовать эти псевдоэлементы для создания больших дизайнов.
Существуют некоторые преимущества и недостатки использования CSS до и после.
Преимущества
- Повышение производительности при переходах и анимации
- Легче реализовать только с помощью CSS
- Может отображать комбинированный CSS из двух элементов
Недостатки
- Проблема доступности из-за того, что не является элементом DOM
- Не поддерживается в старых браузерах
Зачем использовать CSS до и после?
Если вы не хотите изменять код HTML и вносить некоторый уровень тонкой настройки в свой дизайн, вы можете добавить CSS до и после, чтобы вставить псевдоэлемент фиктивного элемента в основной селектор и объединить CSS.
Некоторые из практических приемов , используемых в отрасли прямо сейчас:
Заголовки: Добавление украшений к элементам заголовков. Просто используя псевдоэлементы, мы можем нарисовать линию или 2 линии, создать градиентный фон и т. д.
Маркированные списки и стрелки: Добавление маркеров Unicode намного проще с использованием псевдоэлементов. Упорядоченный список HTML и упорядоченный список могут немного измениться с помощью элемента CSS перед.
Очистить: Очистка плавающих элементов — важная вещь в макете на основе плавающих элементов. псевдоэлементы — лучший друг clearfix. использование класса clearfix — самый простой способ очистить класс до настоящего времени.
Цитаты: Можно легко добавлять символы кавычек к элементу цитаты или любому элементу в целом, поэтому создатели контента могут просто использовать стандартный синтаксис цитаты, и значок цитаты будет отображаться без использования изображения.
Внешние ссылки: Многие сайты используют настраиваемые анимированные подчеркивания для отображения внешних ссылок. Это используется на многих сайтах для создания привлекательных якорных текстов.
Значки: Многие библиотеки значков на основе шрифтов используют псевдоэлементы для отображения шрифтов. FontAwesome, Fontello использует эти методы в своей библиотеке.
Формы: Большинство полей ввода не могут содержать псевдоэлементы. Но обязательные звездочки * можно сделать с помощью CSS после элемента. Флажки и радиокнопки могут иметь индивидуальный дизайн только с некоторыми элементами div и CSS.
Наложения изображений или шаблоны: Наиболее часто используемое основное изображение с текстом поверх использует псевдоэлемент для добавления темных/светлых наложений, чтобы текст можно было прочитать на любом изображении.
Фигуры: С помощью этих элементов можно нарисовать некоторые простые элементы, такие как треугольник, круг, прямоугольник.
Объединив эти основные акции вместе, вы можете создавать разные дизайны.
Подсказки: Если всплывающая подсказка заголовка по умолчанию недостаточно хороша, существуют плагины, которые используют настраиваемые всплывающие подсказки и атрибуты данных для отображения настраиваемых всплывающих подсказок с использованием псевдоэлементов.
Вот один из примеров использования:
Приведенный выше пример демонстрирует некоторые распространенные способы использования CSS после и до псевдоэлементов.
В моей демонстрации: Flash Warning
Я использовал один элемент span и css до и после элементов, чтобы воссоздать тренд Flash Warning Эффект с использованием CSS.
Подводя итог, я использовал изображение и наложил диапазон поверх изображения. Я использую ключевые кадры анимации для изменения прозрачности и фона позиций на псевдоэлементах.
При нажатии на документ я добавляю в тело один класс с именем flash, и он запускает Flash Animation.
Для получения дополнительной информации о том, как запускать анимацию CSS при прокрутке, вы можете проверить мой другой пост.
Я создал эксперимент для измерения производительности CSS для реальных элементов DOM и псевдоэлементов. Вот результаты, которые могут помочь вам решить, когда использовать эти элементы.
Использование DIV:
Я использовал два элемента div для применения циклической анимации. Это была простая анимация @keyframes, и я измерил частоту кадров анимации после нажатия на нее. Это была простая анимация, но ее продолжительность короткая, так что это хороший эксперимент для измерения производительности. Его частота кадров достигает примерно 13FPS .
13 кадров в секунду считается не очень хорошим, поскольку у нас есть устройства, способные без проблем отображать 120 кадров в секунду.
Использование CSS до и после:
Я создал демо Flash Warning с использованием CSS до и после применения цикла анимации со свойствами opacity , background-position и filter .
Я только что измерил частоту кадров, которую мне удалось получить с помощью этого метода. В среднем 31 FPS .
В этом нет ничего революционного, но на самом деле он работает в два раза быстрее, чем элементы DOM.
Какой здесь вердикт?
С циклической анимацией Мы получаем вдвое большую частоту кадров при использовании CSS до и после . Это означает, что ваши анимации и переходы станут более плавными при использовании псевдоэлементов. (В большинстве случаев)
В чем разница между CSS до и после
::before работает как ::first-child элемента. поэтому его свойства будут вести себя как первый ребенок. это включает глубину или z-индекс.
::after работает как :last-потомок элемента и будет иметь большую глубину или z-индекс, чем ::before, пока не будет переопределен.
Но технически между ними нет никакой разницы , так как оба имеют одинаковую реализацию .