Typography
Content
Style syntax for replacing an element with a generated value.
🚧This page is still under construction and some content may not be complete.
Overview [sr-only]
| Class | Declarations |
|---|---|
content:value|… | content: value … |
content:normal | content: normal |
content:none | content: none |
content:no-open-quote | content: no-open-quote |
content:no-close-quote | content: no-close-quote |
content:url(…) | content: url(…) |
content:linear-gradient(…) | content: linear-gradient(…) |
content:image-set(…) | content: image-set(…) |
content:counter(…) | content: counter(…) |
content:attr(…) | content: attr(…) |
Basic usage
Add indicators for external links
The most typical example is using a pseudo-element to add an indicator ↗ after external links.
Discover high-quality products at XYZ Corporation. Visit our website for exclusive deals and unbeatable prices.
<article class="content:'\00a0↗'_:where(a[href^='http'])::after"> …<a target="_blank" href="https://www.example.com">our website</a>…</article>Resolve whitespaces in the value
Whitespace is used in the class attribute of the template to separate different classes. To replace whitespaces with non-breaking spaces \00a0.
<a class="content:'\00a0↗'::after">…</a>Is it not very kind to use \00a0 in markup?
Predefine your content variables without \00a0.
/** @type {import('@master/css').Config} */export default { variables: { content: { external: ' ↗' } }}Apply your custom fonts:
<a class="content:external::after">…</a>Conditionally apply
Apply styles in different states using selectors, media queries, etc.
<div class="content:normal:hover content:normal@sm content:normal@dark content:normal@print">…</div>