Типография
Утилиты для управления содержимым псевдоэлементов before и after.
Class | Styles |
---|---|
content-[<value>] | content: <value>; |
content-(<custom-property>) | content: var(<custom-property>); |
content-none | content: none; |
Используйте синтаксис 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>
Используйте синтаксис 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>
Подробнее об использовании вариантов читайте в документации по вариантам.