Primer CSS On hover Link

Primer CSS is a collection of CSS utilities built and used by GitHub. It offers a wide range of styles, components, and tools to help you create beautiful and functional web interfaces. One of the utilities that Primer CSS provides is a simple yet effective way to add hover styles to links.

To use Primer CSS hover styles for links, you simply need to add the class .hover-underline to the link element. This will apply a simple underline effect to the link when it is hovered over.

<a href="#" class="hover-underline">Hover over me</a>

If you want to change the color of the underline, you can add the class .text-gray-dark or .text-blue. The .text-gray-dark class will make the underline a dark gray color, while .text-blue will make it blue.

<a href="#" class="hover-underline text-gray-dark">Hover over me</a>
<a href="#" class="hover-underline text-blue">Hover over me</a>

If you want to remove the underline effect altogether, you can add the class .no-underline. This will remove the underline both when the link is not hovered over and when it is.

<a href="#" class="hover-underline no-underline">Hover over me</a>

Primer CSS also provides different styles for hover effects on links. You can add the class .hover-grow to make the link grow in size when it is hovered over.

<a href="#" class="hover-grow">Hover over me</a>

You can also add the class .hover-shrink to make the link shrink in size when it is hovered over.

<a href="#" class="hover-shrink">Hover over me</a>

These are just a few examples of the hover styles that Primer CSS provides for links. You can find more information and examples in the official documentation.