Link utilities

Utility classes which can be used to stylize anchors and adjust their color, opacity, underline offset, underline color, and more.

You can change the alpha opacity of the link hsla() color value with .link-opacity-{value}, where {value} can be a percentage of 100, 75, 50, 25, or 10. Please be aware that changes to a color's opacity can lead to links with insufficient contrast.

<!-- Setting link opacity -->
<a href="#" class="link-opacity-100">Link opacity 100</a>
<a href="#" class="link-opacity-75">Link opacity 75</a>
<a href="#" class="link-opacity-50">Link opacity 50</a>
<a href="#" class="link-opacity-25">Link opacity 25</a>
<a href="#" class="link-opacity-10">Link opacity 10</a>

You can also change the opacity level on hover using .link-opacity-{value}-hover.

<!-- Setting link opacity on hover -->
<a href="#" class="link-opacity-100-hover">Link hover opacity 100</a>
<a href="#" class="link-opacity-75-hover">Link hover opacity 75</a>
<a href="#" class="link-opacity-50-hover">Link hover opacity 50</a>
<a href="#" class="link-opacity-25-hover">Link hover opacity 25</a>
<a href="#" class="link-opacity-10-hover">Link hover opacity 10</a>

Style the underline color, offset, and opacity using the link underline utilities.

Link underlines Underline color #

Change the underline's color using .link-underline-{color}, where {color} can be primary, secondary, success, danger, warning, info, light, or dark.

<!-- Setting underline color -->
<a href="#" class="link-underline-secondary">Prev.</a>
<a href="#" class="link-underline-primary">Next</a>

Link underlines Underline offset #

Change the underline's distance from the text using .link-offset-{distance}, where {distance} can be 1, 2, or 3. The offset is set in em units to automatically scale with the element's current font-size.

<!-- Setting underline offset -->
<a href="#">Default link</a>
<a class="link-offset-1" href="#">Offset 1 link</a>
<a class="link-offset-2" href="#">Offset 2 link</a>
<a class="link-offset-3" href="#">Offset 3 link</a>

Link underlines Underline opacity #

Change the underline's opacity using .link-underline-opacity-{value}, where {value} can be a percentage of 100, 75, 50, 25, 10, or 0. Please note, this requires adding .link-underline to first set an hsla() color, which is then used to modify the alpha opacity.

<!-- Setting underline opacity -->
<a href="#" class="link-underline link-underline-opacity-100">Underline opacity 100</a>
<a href="#" class="link-underline link-underline-opacity-75">Underline opacity 75</a>
<a href="#" class="link-underline link-underline-opacity-50">Underline opacity 50</a>
<a href="#" class="link-underline link-underline-opacity-25">Underline opacity 25</a>
<a href="#" class="link-underline link-underline-opacity-10">Underline opacity 10</a>
<a href="#" class="link-underline link-underline-opacity-0">Underline opacity 0</a>

Link underlines Hover variants #

Just like the .link-opacity-*-hover utilities, the underline offset and opacity utilities include :hover variants by default. You can mix and match to create unique link styles.

<!-- Underline utilities with hover variants -->
<a href="#" class="link-offset-2 link-offset-2-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Go to dashboard</a>

You can also pair colored links with the link utilities shown on this page.

<!-- Info link customized with link utilities -->
<a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Go to dashboard</a>

Up next
Object fit utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.