Контент, созданный с помощью CSS
Как мы узнали, HTML предназначен для содержимого, а CSS — для стиля. Но иногда мы хотим добавить косметический, только стильный контент для визуальных целей. Для этого мы можем использовать псевдоэлементы :before и :after в CSS в сочетании со свойством content для вставки содержимого до или после элемента.
Псевдоэлементы
Возможно, самый простой способ понять, как работают псевдоэлементы, — увидеть один из них в действии:
В приведенной выше демонстрации попробуйте заменить восклицательные знаки в свойстве content чем-то другим. Где появляется новый контент? Можете ли вы изменить селектор, чтобы содержимое отображалось после текста?
В приведенном выше примере мы используем селектор псевдоэлемента :before для элемента, к которому мы хотим добавить содержимое. Затем все, что мы помещаем между кавычками в значении свойства content , отображается 
Дополнительные свойства CSS в блоке селектора применяются к вставленному содержимому, в результате чего здесь появляются синие восклицательные знаки большего размера.
Важно знать, что содержимое, добавленное с помощью псевдоэлементов, на самом деле не добавляется в документ; это только визуально, так как фоновое изображение не добавляется к содержимому страницы. Это означает, что контент не читается поисковыми системами или программами чтения с экрана.
Важно помнить, что содержимое псевдоэлемента равно не читается программами чтения с экрана или другими вспомогательными технологиями.
Из-за этих соображений и для сохранения разделения задач между HTML и CSS вы никогда не должны использовать псевдоэлементы для чего-либо, кроме декоративного, несущественного содержимого.
Стилизация вставленного содержимого
Как показано, любой код CSS, написанный в блоке выбора :before или :after
содержание свойство.
Возможности практически безграничны. Например, мы можем захотеть, чтобы вставляемое содержимое вело себя как блочный элемент вместо встроенного поведения по умолчанию. Все, что нам нужно сделать, это использовать свойство display , как и для любого другого элемента:
В приведенной выше демонстрации можно ли изменить цвет смайлика? Можешь выровнять по центру?
Абсолютное позиционирование
Поскольку вставленное содержимое действует как дочерний элемент элемента, к которому оно прикреплено, можно расположить вставленное содержимое как абсолютно относительно холста родителя. (Чтобы освежить в памяти эту технику, обратитесь к Абсолютному Ребенку с Относительным Родителем из главы о позиция свойство.)
Все, что нам нужно сделать, это установить элемент, к которому прикрепляется вставленное содержимое, в позицию :before или :после в позицию : absolute .
Затем мы можем использовать свойства bottom , left , right и/или top со значениями, которые нам нужны.
Можете ли вы в приведенной выше демонстрации переместить сердце в правый верхний угол карты? Что будет, если убрать позиция: относительная от div?
Индексирует ли Google текстовый контент в псевдоэлементах CSS?
Традиционно, когда Google (или другие поисковые системы) ищут текстовый контент для индексации, они ожидают найти этот контент непосредственно в HTML-коде веб-страницы, которая им предоставляется.
Это несколько изменилось с появлением сайтов, использующих JavaScript для обслуживания чего угодно, от небольших фрагментов контента до целых веб-сайтов.
В то время Google был вынужден инвестировать ресурсы, пытаясь максимально эффективно отображать и индексировать контент на основе JavaScript.
Псевдоэлементы CSS
А как насчет текстового содержимого, полученного исключительно из CSS? Можно добавить контент на страницу с помощью псевдоэлементов CSS, таких как ::before и ::after в сочетании со свойством CSS content .
См. простой пример ниже:
Язык кода: HTML, XML (xml)
99 бутылок пива на стене, 99 бутылок пива.
Язык кода: CSS (css)
p::after {content:' Снимите одну и раздайте всем, 98 бутылок пива на стене.'}
Будет отображаться как:
99 бутылок пива на стене 99 бутылок пива. Снимите одну и раздайте всем, 98 бутылок пива на стене.
Год за годом, по мере того, как CSS становится все более продвинутым и вводятся другие функции, такие как возможность выполнять математические вычисления или подсчитывать элементы, используя только CSS, вероятность того, что разработчики и дизайнеры примут эти функции, становится все выше.
Но сможет ли Google отображать и индексировать этот контент? Будет ли текст, найденный в CSS, отображаться и доступен для поиска в Google?
Лучше всего ли использовать CSS для текста?
Прежде чем мы начнем, важно отметить, что в подавляющем большинстве ситуаций использование псевдоэлементов CSS и свойства ‘content’ (вместо HTML) для отображения значительного объема текстового контента на веб-сайте абсолютно не рекомендуется. по разным причинам, в том числе:
- Текст не может быть выбран пользователями, то есть его нельзя выделить или скопировать/вставить.
- Текст будет проигнорирован программами чтения с экрана, что сделает содержимое недоступным и противоречит правилам доступности.
F87: Невыполнение критерия успеха 1.3.1 из-за вставки недекоративного содержимого с использованием псевдоэлементов :before и :after и свойства ‘content’ в CSS
W3.org
Псевдоэлементы CSS должны вообще говоря, использовать только для декоративных элементов, которые не являются необходимыми для потребления контента на странице.
Опрос SEO
До написания этой статьи я не смог найти никаких других статей, посвященных SEO, по этой теме, поэтому я подумал, что было бы интересно покопаться и провести небольшое исследование.
Я спросил SEO-сообщество, что они думают в ходе опроса в Твиттере, и получил следующие результаты:
Может ли Google индексировать текстовое содержимое из CSS, отображаемое на веб-странице в виде псевдоэлемента, например :before, :after?
— Колин Макдермотт (@ColinMcDermott) 30 июня 2021 г.
Исключая пользователей, которые просто хотели увидеть результаты, существует довольно равномерное распределение между тремя вариантами: «Нет», и «Не знаю», , получившие равное количество голосов (12), и . «Да» отстает всего на несколько голосов (9).
Test
Для тестирования я создал страницу, которая не содержала стандартного HTML-контента и добавляла текстовое содержимое с использованием псевдоэлементов CSS, прикрепленных к тегам заголовков, абзацев, div и ссылок, полученных из внешнего файла CSS-файла.
Вы также можете просмотреть код и результирующую страницу на CodePen здесь.
Чтобы придать URL-адресу небольшой импульс, чтобы помочь ему быстрее индексироваться (или вообще вообще), я временно связался с ним из нижнего колонтитула сайта.
Рендеринг
Для тестирования я также прогнал страницу с помощью инструмента Fetch в Search Console и инструмента тестирования Mobile Friendly.
Оба показали, что Google смог полностью отобразить содержимое CSS так, как оно выглядело для обычных пользователей на странице.
Results
В конце концов (к моему небольшому удивлению) страница была проиндексирована в Google, несмотря на полное отсутствие контента.
Однако, проверив полученный список в Google и после поиска строк текста со страницы, стало ясно, что фактический контент не был проиндексирован.
Таким образом, из этого теста мы можем подтвердить, что: НЕТ — хотя Google может отображать его, контент на основе CSS в настоящее время не будет индексироваться в Google.