tailwind-css - Tailwind CSS 边框底部移动最后一个元素

Question

尝试使用 Tailwind 添加自定义下划线悬停效果。

<div className='absolute left-24 space-x-4 hidden lg:flex font-light'>
               <p className='hover:border-b-2 border-blue-500 -mb-1'>Find jobs</p>
               <p className='hover:border-b-2 border-blue-500 -mb-1 '>Company Reviews</p>
               <p className='hover:border-b-2 border-blue-500 '> Find salaries</p>
               </div>

当添加 -mb-1 时，它适用于前两个，但是当“查找薪水”悬停在文本上时，文本会向上移动几个 px。尝试添加 MB 或 -MB 但仍然没有运气。

有一个更好的方法吗？

Answer 1

您可以更改边框颜色，而不是更改边框宽度，这样就没有移动部件。

<div class='space-x-4 font-light'>
  <p class='border-b-2 hover:border-blue-500 border-transparent'>Find jobs</p>
  <p class='border-b-2 !m-0 hover:border-blue-500 border-transparent '>Company Reviews</p>
  <p class='border-b-2 !m-0 hover:border-blue-500 border-transparent'> Find salaries</p>
</div>