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-opacity-10" href="#">Link opacity 10</a></p> <p><a class="link-opacity-25" href="#">Link opacity 25</a></p> <p><a class="link-opacity-50" href="#">Link opacity 50</a></p> <p><a class="link-opacity-75" href="#">Link opacity 75</a></p> <p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
You can even change the opacity level on hover.
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p> <p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p> <p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p> <p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p> <p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
Change the underline’s color independent of the link text color.
<p><a href="#" class="link-underline-primary">Primary underline</a></p> <p><a href="#" class="link-underline-secondary">Secondary underline</a></p> <p><a href="#" class="link-underline-success">Success underline</a></p> <p><a href="#" class="link-underline-danger">Danger underline</a></p> <p><a href="#" class="link-underline-warning">Warning underline</a></p> <p><a href="#" class="link-underline-info">Info underline</a></p> <p><a href="#" class="link-underline-light">Light underline</a></p> <p><a href="#" class="link-underline-dark">Dark underline</a></p>
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 href="#">Default link</a></p> <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>
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>
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.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#"> Underline opacity 0 </a>
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.
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p> <p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p> <p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p> <p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p> <p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p> <p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p> <p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p> <p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p> <p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
.visually-hidden class. In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.
Link utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),
© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/utilities/link/