如何用Tailwind CSS将悬停边框定位在文本下方42px且不影响p标签？

要实现悬停时边框出现在文本下方42px且不影响<p>标签内容，核心是用伪元素创建边框——伪元素脱离文档流，不会挤压或移动原有内容。结合Tailwind CSS可以这样实现：

return (
    <div className='relative hover:after:bg-gray-900 after:content-[""] after:absolute after:left-0 after:right-0 after:h-[4px] after:bottom-[-42px] after:bg-transparent transition-all duration-200'>
        <p>Collections</p>
    </div>
)

关键类解析 #

• relative：让父容器成为伪元素的定位基准
• after:content-['']：创建空伪元素作为边框载体
• after:absolute：伪元素脱离文档流，完全不影响原有布局
• after:left-0 after:right-0：让伪元素宽度与父容器保持一致
• after:h-[4px]：设置边框的高度
• after:bottom-[-42px]：将边框定位在父容器底部下方42px的位置，刚好对应文本下方的距离
• after:bg-transparent hover:after:bg-gray-900：默认隐藏边框，hover时显示指定颜色
• transition-all duration-200：给边框的显示/隐藏加上平滑过渡效果

如果更习惯用top定位，也可以把after:bottom-[-42px]替换为after:top-[calc(100%+42px)]，效果完全一致。

这种方式不会改变<p>标签的布局，所有视觉变化都由脱离文档流的伪元素实现，完美满足需求。

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