在React和Tailwind CSS中实现鼠标悬停时的下划线效果非常简单。你可以使用Tailwind CSS的hover伪类来添加下划线。以下是一个示例代码：import React from 'react'; const UnderlineOnHover = () => { return (

鼠标悬停时会出现下划线

); };

在React和Tailwind CSS中优雅实现鼠标悬停下划线效果

本文演示如何在React项目中，利用Tailwind CSS高效创建鼠标悬停时出现下划线的文本效果。 之前的尝试可能因为Tailwind CSS类名的使用方式或选择器顺序问题导致失效。以下方法能确保效果正确呈现。

我们先来看一个改进后的代码示例：

  
菜单项文本

代码详解:

• relative: 这是关键！此类使::after伪元素能够相对于其父元素(div)进行定位。
• inline-block: 确保元素占据一行空间，方便下划线水平延伸。 (如果你的p元素本身已经占据一行，可以移除这个类)
• mr-8: Tailwind CSS的margin right，调整元素间距。
• cursor-pointer: 将鼠标指针更改为手型指针。
• hover:after:absolute: 只有在悬停时，::after伪元素才设置为绝对定位。
• hover:after:content-['']: 生成一个空的伪元素。
• hover:after:bottom-0: 将伪元素放置在父元素底部。
• hover:after:left-0: 将伪元素放置在父元素左边。
• hover:after:w-full: 伪元素宽度设置为父元素的100%。
• hover:after:h-[1px]: 伪元素高度设置为1像素，形成细线。
• hover:after:bg-[#3D3D3D]: 设置伪元素背景颜色为深灰色。

改进说明:

此代码比之前的版本更简洁、更易读，并避免了不必要的类名和注释。 hover修饰符正确地应用于::after伪元素，确保下划线只在鼠标悬停时出现。 高度也改为更标准的h-[1px]。 通过使用方括号[]，我们可以直接在Tailwind CSS类名中使用变量或表达式，使代码更灵活。

通过以上步骤，你就能在你的React和Tailwind CSS项目中轻松实现鼠标悬停下划线效果了。 记得检查你的Tailwind CSS配置是否正确，并且已正确引入。