Tailwind CSS 边框底部移动最后一个元素答案

【问题标题】：Tailwind CSS Border bottom moving last elementTailwind CSS 边框底部移动最后一个元素
【发布时间】：2021-09-25 05:51:29
【问题描述】：

尝试使用 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 但仍然没有运气。

有没有更好的方法来做到这一点？

【问题讨论】：

标签： tailwind-css

【解决方案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>

【讨论】：