如何在Tailwind CSS中实现鼠标悬停时从中心向外扩展效果？

原生CSS实现方案 #

我可以通过以下原生CSS代码实现鼠标悬停时从中心向外扩展的下划线效果：

CSS代码 #

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);
}

HTML代码 #

<a href="#">Expand from center</a><br/>

已查阅的Tailwind文档 #

• Transform Origin
• Transition Property
• Animation
• Scale

尝试的Tailwind代码 #

我尝试了以下Tailwind代码，但还没达到预期效果：

<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>

请问如何在Tailwind CSS中实现鼠标悬停时从中心向外扩展的下划线效果？

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ