Link
Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
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.
<p>
<a class="link-primary link-opacity-10" href="#">Link opacity 10
</a>
</p>
<p>
<a class="link-primary link-opacity-25" href="#">
Link opacity 25</a>
</p>
<p>
<a class="link-primary link-opacity-50" href="#">
Link opacity 50</a>
</p>
<p>
<a class="link-primary link-opacity-75" href="#">
Link opacity 75</a>
</p>
<p>
<a class="link-primary link-opacity-100" href="#">
Link opacity 100
</a>
</p>
You can even change the opacity level on hover.
<p><a class="link-primary link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-primary link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-primary link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-primary link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-primary link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
Link underlines
Underline color
Change the link’s color using .link-underline-primary.
<p><a href="#" class="link-primary link-underline-primary">Primary underline</a></p>
<p><a href="#" class="link-secondary link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-success link-underline-success">Success underline</a></p>
<p><a href="#" class="link-danger link-underline-danger">Danger underline</a></p>
<p><a href="#" class="link-warning link-underline-warning">Warning underline</a></p>
<p><a href="#" class="link-info link-underline-info">Info underline</a></p>
<p><a href="#" class="link-light link-underline-light">Light underline</a></p>
<p><a href="#" class="link-dark link-underline-dark">Dark underline</a></p>
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.
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>
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.
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
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.