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

除了改变border-width，你可以改变border-color，这样就没有移动的部分了。

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