Utilities: add 0 value to `link-underline-opacity` (#38131)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index e1191f146198c7f0efba448d688ab7b39fdb5a38..6f1b306b34771fc3b9d4733d85f2a4b1cc86ea5c 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -651,6 +651,7 @@ $utilities: map-merge(
       class: link-underline-opacity,
       state: hover,
       values: (
+        0: 0,
         10: .1,
         25: .25,
         50: .5,

diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md
index 2baebf9e2fd3d4b3763321f0be27a2a14a38bc07..1b8eaa1ef3f7ecb40c1ff5c9e6bbd70cbef7058d 100644 (file)
--- a/site/content/docs/5.3/utilities/link.md
+++ b/site/content/docs/5.3/utilities/link.md
@@ -59,6 +59,7 @@ Change the underline's distance from your text. Offset is set in `em` units to a
 Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity.
 
 {{< example >}}
+<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>
@@ -71,8 +72,8 @@ Change the underline's opacity. Requires adding `.link-underline` to first set a
 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 >}}
-<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="#">
-  Underline opacity 10
+<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>
 {{< /example >}}