Вставка HTML-кода через :before, :after в CSS: решение

Быстрый ответ

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

p:before { content: "“"; } /* Вставляем открывающую кавычку */
p:after { content: "”"; } /* А закрывающую кавычку также */

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

Отсутствие поддержки вставки HTML-кода

Псевдоэлементы :before и :after предназначены только для визуального оформления и не поддерживают вставку HTML-тегов:

• Они позволяют добавлять текст или CSS-форматирования, но не HTML-код.
• Данные, внедрённые с их помощью, недоступны для скринридеров и поисковиков.
• С помощью них нельзя создать интерактивные элементы, такие как кнопки или ссылки.

Для вставки HTML есть альтернативные способы

Воспользуйтесь JavaScript или jQuery для динамической вставки HTML-кода:

let para = document.querySelector('p');
para.insertAdjacentHTML('beforebegin', '<div class="quote">“</div>'); /* Добавляем открывающую кавычку */
para.insertAdjacentHTML('afterend', '<div class="quote">”</div>'); /* И закрывающую кавычку */

Такой подход позволяет вставлять интерактивные HTML-элементы по бокам от выбранного элемента.

Визуализация

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

Ваш HTML-элемент: 👕

::before = [🎀]

Хотите добавить бант? Он появится рядом с рубашкой!
::before |🎀👕|

::after = [🌟]

А если звездочку? Она появится после рубашки!
::after  |👕🌟|

Так вот псевдоэлементы выступают в роли стильных аксессуаров (🎀🌟), не взаимодействуя с структурой элемента.

Экранирование символов в свойстве content

Экранируйте кавычки внутри свойства content, чтобы предотвратить ошибки в коде:

p:before { content: "\""; } /* Здесь двойные кавычки: "На страже!" */
p:before { content: "\'"; } /* А здесь одинарные: 'Выполняю!' */

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

Примеры использования :before и :after

• Декоративные кавычки (“, ”) или маркеры (•) вокруг блоков текста.
• Оформление цифр в нумерованных списках, например 01., 02..
• Добавление иконок, что особенно удобно при использовании иконок из специализированных библиотек, таких как Font Awesome.

Полезные материалы

1. ::before – CSS: Каскадные таблицы стилей | MDN — Описание работы ::before на MDN.
2. ::after – CSS: Каскадные таблицы стилей | MDN — Руководство по ::after на MDN.
3. ::before / ::after | CSS-Tricks — Подробное руководство по ::before и ::after от CSS-Tricks.
4. CSS ::before Selector — Руководство по селектору ::before от W3Schools.
5. CSS ::after Selector — Примеры использования ::after от W3Schools.
6. ::before | Codrops — Справочная информация по ::before от Codrops.
7. ::after | Codrops — Обширный справочник по ::after от Codrops.