Tailwind CSS hover自定义下划线效果最后一个元素上移问题求解

你遇到的hover时文字上移问题，本质是hover状态才动态添加border边框导致盒模型高度变化：border-b-2会为元素增加2px的底部高度，前两个p元素添加的-mb-1刚好抵消了边框带来的高度增量，第三个元素未做对应适配才会出现位移。

推荐两种无位移的稳定实现方式： #

方案1：默认预留透明边框（兼容性最好） #

提前给所有p元素默认添加透明的2px底部边框，hover时仅修改边框颜色，元素高度全程固定，不会出现位移，无需额外负margin适配：

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

如果需要调整下划线和文字的间距，给p元素加pb-[自定义数值]调整底部内边距即可。 #

方案2：使用原生文本下划线属性（更轻量化） #

直接用CSS的text-decoration相关属性实现，完全不会影响元素盒模型，还可以灵活调整下划线粗细、偏移距离：

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

其中decoration-2控制下划线粗细为2px，underline-offset-4控制下划线和文字底部的间距为4px，可以按需调整数值。

内容的提问来源于stack exchange，提问作者Connor Deane