Character Styles

Hyperlink Character Styles

.ss-t-char-link

The quick brown fox jumps over the lazy dog. 0123456789

.ss-t-char-link-underlined

The quick brown fox jumps over the lazy dog. 0123456789

Links in Prose

A paragraph with an inline link, an underlined link, and an external link. Hover them to see the state colors.

HTML 
<p>
            A paragraph with an <a href="#">inline link</a>, an
            <a href="#" class="ss-t-char-link-underlined">underlined link</a>,
            and an
            <a href="https://scape.style" target="_blank" rel="noopener">
                external link</a
            >. Hover them to see the state colors.
        </p>

Link State Colors

link
hover
active
visited
focus
HTML 
<div style="display: flex; gap: 12px; flex-wrap: wrap">
            <div style="width: 150px">
                <div
                    style="
                        height: 40px;
                        border: 1px solid var(--ss-color-border-muted);
                        background: var(--ss-color-link);
                    "
                ></div>
                <small>link</small>
            </div>
            <div style="width: 150px">
                <div
                    style="
                        height: 40px;
                        border: 1px solid var(--ss-color-border-muted);
                        background: var(--ss-color-state-hover);
                    "
                ></div>
                <small>hover</small>
            </div>
            <div style="width: 150px">
                <div
                    style="
                        height: 40px;
                        border: 1px solid var(--ss-color-border-muted);
                        background: var(--ss-color-state-active);
                    "
                ></div>
                <small>active</small>
            </div>
            <div style="width: 150px">
                <div
                    style="
                        height: 40px;
                        border: 1px solid var(--ss-color-border-muted);
                        background: var(--ss-color-link-visited);
                    "
                ></div>
                <small>visited</small>
            </div>
            <div style="width: 150px">
                <div
                    style="
                        height: 40px;
                        border: 1px solid var(--ss-color-border-muted);
                        background: var(--ss-color-focus);
                    "
                ></div>
                <small>focus</small>
            </div>
        </div>