content

Примеры

Базовый пример

Используйте синтаксис content-[<value>] вместе с вариантами before и after для установки содержимого псевдоэлементов ::before и ::after:

<p>Higher resolution means more than just a better-quality image. With aRetina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">Pro Display XDR</a> gives you nearly 40 percent more screen real estate thana 5K display.</p>

Ссылка на значение атрибута

Используйте синтаксис content-[attr(<name>)] для ссылки на значение, хранящееся в атрибуте, используя CSS-функцию attr():

<p before="Привет мир" class="before:content-[attr(before)] ...">  <!-- ... --></p>

Использование пробелов и подчеркиваний

Поскольку пробелы обозначают конец класса в HTML, замените любые пробелы в произвольном значении подчеркиванием:

<p class="before:content-['Hello_World'] ..."></p>

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

<p class="before:content-['Hello\_World']"></p>

Использование CSS-переменной

Используйте синтаксис content-(<custom-property>) для управления содержимым псевдоэлементов ::before и ::after с помощью переменной CSS:

<p class="content-(--my-content)"></p>

Это просто сокращение для content-[var(<custom-property>)], которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a content утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>

Подробнее об использовании вариантов читайте в документации по вариантам.