我試圖讓我的導航鏈接向上翻譯，當鼠標懸停時會出現一條下劃線，但翻譯似乎不起作用。有人能幫我找到錯誤嗎？我用的是tailwindcss。

<ul class="flex items-center gap-14 font-YSDarkSemiBold text-lg">
    <li class="group relative">
        <a href="#">
            <span class="group-hover:-translate-y-6 transition-all">Techno
                Conference</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-2 w-0 h-1 bg-tcLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#FF6E6EB3]"></span>
        </a>
    </li>
    <li class="group relative">
        <a href="#">
            <span class="group-hover:-translate-y-6 transition-all">Techno
                Academy</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-2 w-0 h-1 bg-taLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#FFFD96B3]"></span>
        </a>
    </li>
    <li class="group relative">
        <a href="#">
            <span class="group-hover:-translate-y-6 transition-all">Hackathon
                6.0</span>
            <span
                class="absolute left-0 right-0 mx-auto -bottom-2 w-0 h-1 bg-hackLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#246FFFB3]"></span>
        </a>
    </li>
</ul>

提前感謝！

變換在& ltspan & gt元素，因為默認情況下它們是display: inline。您可以考慮對它們應用display: inline-block:

<script src="https://cdn.tailwindcss.com"></script>

<ul class="flex items-center gap-14 font-YSDarkSemiBold text-lg">
  <li class="group relative">
    <a href="#">
      <span class="group-hover:-translate-y-6 transition-all inline-block">Techno
                Conference</span>
      <span class="absolute left-0 right-0 mx-auto -bottom-2 w-0 h-1 bg-tcLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#FF6E6EB3]"></span>
    </a>
  </li>
  <li class="group relative">
    <a href="#">
      <span class="group-hover:-translate-y-6 transition-all inline-block">Techno
                Academy</span>
      <span class="absolute left-0 right-0 mx-auto -bottom-2 w-0 h-1 bg-taLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#FFFD96B3]"></span>
    </a>
  </li>
  <li class="group relative">
    <a href="#">
      <span class="group-hover:-translate-y-6 transition-all inline-block">Hackathon
                6.0</span>
      <span class="absolute left-0 right-0 mx-auto -bottom-2 w-0 h-1 bg-hackLinearGradient transition-all group-hover:w-[70px] rounded-full group-hover:shadow-[0px_0px_6px_1px_#246FFFB3]"></span>
    </a>
  </li>
</ul>