Misc

Small elements that do not need a page of their own.

Horizontal rule#

hr is a thin line in the muted border color, with the text block spacing above and below.

<p>Above the rule.</p>
<hr />
<p>Below the rule.</p>

Mark#

mark highlights text with a tinted background.

<p>Search results can show the <mark>matching words</mark> highlighted.</p>

Inserted and deleted text#

ins and del color their text. ins has no underline, and del keeps the browser's strikethrough.

<p>The price is <del>$20</del> <ins>$15</ins> this week.</p>

Abbreviation#

abbr with a title gets a dotted underline and a help cursor, and the title shows as a tooltip on hover. Touch screens have no hover, so spell out the full term the first time you use it.

<p>Write semantic <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Keyboard keys#

kbd is drawn inverted, like a keycap. It shares its style with the other code elements.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Hidden elements#

The hidden attribute and <template> are always display: none, even when another rule sets display.

Customization#

--pico-muted-border-color

light-dark(#e4e6ea, #292b2f)

Color of hr.

--pico-mark-background-color

light-dark(#fce6bf, #014063)

Background of mark.

--pico-mark-color

light-dark(#0f1114, #ffffff)

Text color of mark.

--pico-ins-color

light-dark(#1c6954, #62af9a)

Color of ins.

--pico-del-color

light-dark(#883835, #ce7e7b)

Color of del.

--pico-text-selection-color

light-dark(oklch(0.658 0.1564 242.2 / 0.25), oklch(0.707 0.1679 242.1 / 0.1875))

Background of selected text (::selection).