Вставка HTML-сущности через CSS: content и &nbsp

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

Для того, чтобы внедрить неразрывный пробел через CSS, предлагается забыть о HTML-сущности  . Вместо этого используйте последовательность Unicode \00a0 в псевдоэлементах ::before и ::after:

.element::after {
  /* Создание неразрывного пробела */
  content: "\00a0";
}

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

Чистота кода и его читаемость

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

.element::before {
  /* Каждый символ имеет своё место */
  content: "\00a0\0020";
}

\0020 — это код обычного пробела. Он также обеспечивает отделение следующего символа от неразрывного пробела.

HTML-сущности в формате Unicode

Забудьте о HTML-сущностях, пришло время Unicode. Так, » (») преобразуется в Unicode-последовательность \00bb:

.element::before {
  /* Начало трансформации */
  content: "\00bb";
}

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

Устранение потенциальных затруднений

Будьте осмотрительны, используя HTML-сущности внутри свойства CSS content:

/* Ошибка в коде */
.element::before {
  content: " ";
}

Вышеуказанный код отобразит строку   вместо того, чтобы создать пробел. Используйте экранированные Unicode-последовательности для точного контроля отображения символов.

Работа с различными сущностями

Вставка символов

Каждая HTML-сущность имеет соответствующего её "партнёра" в кодировке Unicode. Так, ⋄ (♦) переводится в \2666. Вот как это выглядит на практике:

.element::after {
  /* Бриллианты – лучшие друзья разработчика */
  content: "\2666";
}

Подробнее об этом расскажет наш спикер на видео

Примеры с математическими символами

Математические символы также имеют свои эквиваленты в Unicode. Так, × (×) превращается в \00d7:

.element::before {
  /* Будьте аккуратны с умножением */
  content: "\00d7";
}

Применение музыкальных символов

Для добавления музыкальной ноты, &eighthnote; (♪), используйте \266a:

.element::after {
  /* Пусть звучит музыка */
  content: "\266a";
}

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

Представьте, как художник (👩‍🎨) добавляет немного сияния на свою картину, не затрагивая исходного изображения:

.masterpiece::after {
  /* Волшебное касание */
  content: '✨';
}

За счёт небольшой метаморфозы происходит такое преобразование:

До: [🖼️]
После: [🖼️✨]

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

Раскрытие новых возможностей

Создание пространственных композиций

Для создания ощущения простора используйте широкий пробел, или так называемый "пробел en-space", который получается через Unicode-последовательность \2002:

.element::after {
  /* Какой у вас пробел? */
  content: "\2002";
}

Добавление знаковых символов

При необходимости указать направление используйте → (→), который в Unicode представляется как \2192:

.element::before {
  /* Следуйте этому пути... */
  content: "\2192";
}

Овладение экранированием в Unicode

При добавлении символов всегда правильно экранируйте Unicode-последовательности. Так, &heart; (♥) превратится в \2665:

.element::after {
  /* Подарите любовь */
  content: "\2665";
}

Профессиональный совет: работа с переменными

Для удобства повторного использования символов вы можете сохранить их в переменных CSS:

:root {
  /* Звёзды в резерве */
  --star: "\2605";
}

.element::before {
  content: var(--star);
}

Методы решения распространённых проблем

Ситуации с неожиданными результатами

Если результат не соответствует ожидаемому значению, используйте проверку символов и синтаксиса Unicode.

Критическое значение кодировки

Чтобы не столкнуться с ошибками в Unicode, проверьте, что ваш CSS-файл сохранён в кодировке UTF-8.

Проверка совместимости браузеров

Учитывая большое количество браузеров, для проверки поддерживают ли они определённые сущности, воспользуйтесь сервисом Can I use....

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

1. ::before – CSS: Cascading Style Sheets | MDN — Руководство по псевдоэлементу ::before от MDN.
2. ::after – CSS: Cascading Style Sheets | MDN — Детальное описание псевдоэлемента ::after от MDN.
3. ::before / ::after | CSS-Tricks – CSS-Tricks — Полномасштабная энциклопедия, раскрывающая ::before и ::after от CSS-Tricks.
4. CSS ::before Selector — Наглядные примеры использования селектора ::before от W3Schools.
5. Using CSS custom properties (variables) – CSS: Cascading Style Sheets | MDN — Подробный справочник о настраиваемых свойствах и переменных CSS от MDN.
6. "generated content" | Can I use... Support tables for HTML5, CSS3, etc — Инструмент для проверки совместимости браузеров с генерируемым содержимым CSS.
7. CSS Generated Content Module Level 3 — Обзор стандартов W3C для генерируемого и замещаемого содержимого в CSS.