# Misc

> Horizontal rules, mark, ins and del, abbr and kbd.

Page: https://pico.rusticstack.com/docs/content/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.

**Example: hr**

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

## Mark

`mark` highlights text with a tinted background.

**Example: mark**

```html
<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.

**Example: ins and del**

```html
<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.

**Example: abbr**

```html
<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](/docs/content/code) elements.

**Example: kbd**

```html
<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

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-muted-border-color` |  | Color of hr. |
| `--pico-mark-background-color` |  | Background of mark. |
| `--pico-mark-color` |  | Text color of mark. |
| `--pico-ins-color` |  | Color of ins. |
| `--pico-del-color` |  | Color of del. |
| `--pico-text-selection-color` |  | Background of selected text (::selection). |