Syntax

Content

Replacing an element with a generated value.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
content:value|…content: value …;
content:normalcontent: normal;
content:nonecontent: none;
content:no-open-quotecontent: no-open-quote;
content:no-close-quotecontent: 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

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 based on different states using selectors and conditional queries.

<div class="content:normal:hover content:normal@sm content:normal@dark content:normal@print">…</div>
Syntax
Contain

Providing performance benefits by limiting calculations of layout.

Syntax
Cursor

Setting the mouse cursor style.

© Aoyue Design LLC.
MIT License