Colored Links
Link colors
You can use the .link-* classes to colorize
links. Unlike the .text-* classes,
these classes have a :hover and :focus state. Some of
the link styles use a relatively light foreground color, and should only be used
on a dark background in order to have sufficient contrast.
Link utilities
Colored links can also be modified by our link utilities.
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.
Link Opacity Hover
You can even change the opacity level on hover.
Underline color
Change the underline’s color independent of the link text color.
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.
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.