Link Hover
<div class="max-w-lg mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Hover Underline Links</h2>
<p class="mb-4">
These links only show their underline when you hover over them, creating a cleaner look by default.
</p>
<div class="space-y-4">
<div>
<h3 class="text-lg font-medium mb-2">Basic Hover Link</h3>
<a href="#" class="text-blue-600 no-underline hover:underline hover:underline-offset-2">Click me</a>
</div>
<div>
<h3 class="text-lg font-medium mb-2">With Transition Effect</h3>
<a href="#" class="text-blue-600 no-underline hover:underline hover:underline-offset-2 hover:decoration-2 transition-all duration-150">Click me</a>
</div>
<div>
<h3 class="text-lg font-medium mb-2">With Color Change on Hover</h3>
<a href="#" class="text-blue-600 no-underline hover:underline hover:underline-offset-2 hover:text-blue-800">Click me</a>
</div>
<div>
<h3 class="text-lg font-medium mb-2">In a paragraph context</h3>
<p>
This is a paragraph with some text content that includes a
<a href="#" class="text-blue-600 no-underline hover:underline hover:underline-offset-2">link to another page</a>
in the middle of the sentence to demonstrate how hover underline looks in context.
</p>
</div>
</div>
</div>
Copied to clipboard