link.md

layout	title	description	group	toc	added
docs	Link	Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.	utilities	true	5.3

Link opacity

Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color's opacity can lead to links with [insufficient contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}).

{{< example >}}

Link opacity 10

Link opacity 25

Link opacity 50

Link opacity 75

Link opacity 100

{{< /example >}}

You can even change the opacity level on hover.

{{< example >}}

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

{{< /example >}}

Link underlines

Underline color

Change the underline's color independent of the link text color.

{{< example >}} {{< link-underline-colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}

{{ .name | title }} underline

{{- end -}} {{< /link-underline-colors.inline >}} {{< /example >}}

Underline offset

Change the underline's distance from your text. Offset is set in em units to automatically scale with the element's current font-size.

{{< example >}}

Default link

Offset 1 link

Offset 2 link

Offset 3 link

{{< /example >}}

Underline opacity

Change the underline's opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.

{{< example >}}

Underline opacity 0

Underline opacity 10

Underline opacity 25

Underline opacity 50

Underline opacity 75

Underline opacity 100

{{< /example >}}

Hover variants

Just like the .link-opacity-*-hover utilities, .link-offset and .link-underline-opacity utilities include :hover variants by default. Mix and match to create unique link styles.

{{< example >}} Underline opacity 0 {{< /example >}}

Colored links

[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.

{{< example >}} {{< colored-links.inline >}} {{- range (index $.Site.Data "theme-colors") }}

{{ .name | title }} link

{{- end -}} {{< /colored-links.inline >}}

Emphasis link

{{< /example >}}

{{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}}

Sass

In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.

Utilities API

Link utilities are declared in our utilities API in scss/_utilities.scss. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="utils-links" file="scss/_utilities.scss" >}}