In CSS I can expand on hover with:
a {
--border-color: green;
--border-width: 5px;
--bottom-distance: 0px;
text-decoration:none;
background-position: 50% calc(100% - var(--bottom-distance));
color: #666;
display: inline-block;
background-image: linear-gradient(var(--border-color), var(--border-color));
background-size: 0% var(--border-width);
background-repeat: no-repeat;
transition: background-size 0.3s;
margin: 5px 0;
}
a:hover {
background-size: 100% var(--border-width);
}
<a href="#">Expand from center</h1><br/>
I've been reading the docs on:
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-green-600"></span>
</a>
How can I expand on hover from center in Tailwind CSS?
Instead of tranisitioning max-width
, consider transitioning transform: scaleX()
. This is more performant since the browser does less work per frame than max-width
. Also, transform: scaleX()
has the added benefit that transform-origin
works with it, thus solving your problem too:
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 h-0.5 bg-green-600 origin-center"></span>
</a>