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.
{ {< example >} }
{ {< /example >} }
You can even change the opacity level on hover.
{ {< example >} }
{ {< /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 >} }
{ {< /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 >} }
{ {< /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 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") } }
{ {- end -} } { {< /colored-links.inline >} }
{ {< /example >} }
{ { < callout info }} { { < partial "callouts/warning-color-assistive-technologies.md" }} { { < /callout }}
CSS#
In addition to the following Sass functionality, consider reading about our included CSS custom properties ( aka CSS variables) for colors and more.
Sass utilities API#
Link utilities are declared in our utilities API in
scss/_utilities.scss. Learn how to use the utilities API.
{ { < scss-docs name="utils-links" file="scss/_utilities.scss" }}