Links

Textual supports the concept of inline "links" embedded in text which trigger an action when pressed. There are a number of styles which influence the appearance of these links within a widget.

!!! note

These CSS rules only target Textual action links. Internet hyperlinks are not affected by these CSS rules.

Property	Description
`link-background`	The background color of the link text.
`link-color`	The color of the link text.
`link-hover-background`	The background color of the link text when the cursor is over it.
`link-hover-color`	The color of the link text when the cursor is over it.
`link-hover-style`	The style of the link text when the cursor is over it.
`link-style`	The style of the link text (e.g. underline).

Syntax

--8<-- "docs/snippets/syntax_block_start.md" link-background: <color> [<percentage>];

link-color: <color> [<percentage>];

link-style: <text-style>;

link-hover-background: <color> [<percentage>];

link-hover-color: <color> [<percentage>];

link-hover-style: <text-style>; --8<-- "docs/snippets/syntax_block_end.md"

Visit each style's reference page to learn more about how the values are used.

Values

<color>

--8<-- "docs/snippets/type_syntax/color.md"

<percentage>

--8<-- "docs/snippets/type_syntax/percentage.md"

<text-style>

--8<-- "docs/snippets/type_syntax/text_style.md"

Example

In the example below, the first label illustrates default link styling. The second label uses CSS to customize the link color, background, and style.

=== "Output"

```{.textual path="docs/examples/styles/links.py"}
```

=== "links.py"

```python
--8<-- "docs/examples/styles/links.py"
```

=== "links.css"

```sass
--8<-- "docs/examples/styles/links.css"
```

Additional Notes

Inline links are not widgets, and thus cannot be focused.

3.3 KiB Raw Blame History