前端 - react tailwind中想写一个hover上去生成after下划线，应该怎么写？

Question

react tailwind中想写一个hover上去生成after下划线。应该怎么写？下面我写的不生效
<div

        className='            menu-item            cursor-pointer             inline-block             mr-8            // hover:after:content-[""]            // hover:after:mt-[-1.5rem]            // hover:after:block            // hover:after:bg-#3D3D3D            // hover:after:h-0.5            // hover:after:w-full        '    >

就是菜单鼠标移上 出现类似下边框

Answer 1

在 React 和 Tailwind CSS 中，你可以使用 hover 伪类来创建一个鼠标悬停时出现的样式效果。对于你的需求，你想要在鼠标悬停时显示一个下划线。你可以使用 after 伪元素来实现这个效果。

下面是一个示例代码，展示了如何在 React 和 Tailwind CSS 中实现这个效果：

import React from 'react';import { Link } from 'react-router-dom';const MenuItem = ({ to, children }) => (  <Link to={to}>    <div      className="        menu-item        cursor-pointer        inline-block        mr-8        hover:text-black        hover:bg-white        hover:after:content-[""]        hover:after:mt-[-1.5rem]        hover:after:block        hover:after:bg-black        hover:after:h-0.5        hover:after:w-full"    >      {children}    </div>  </Link>);export default MenuItem;

在上面的代码中，我们创建了一个名为 MenuItem 的组件，它接受 to 和 children 作为属性。to 属性用于定义链接的目标地址，children 属性用于传递给组件的子元素。

在组件的内部，我们使用了 <Link> 组件来创建一个可点击的链接。我们为 <div> 元素添加了 hover 伪类的样式。这些样式包括 text-black 和 bg-white，分别用于设置鼠标悬停时的文本颜色和背景颜色。另外，我们还使用了 hover:after:content-[""]、hover:after:mt-[-1.5rem]、hover:after:block、hover:after:bg-black、hover:after:h-0.5 和 hover:after:w-full 来设置鼠标悬停时的下划线样式。这些样式将生成一个黑色的下划线，位置在元素下方，宽度为容器宽度的 100%。

你可以根据需要调整这些样式的值，以达到你想要的效果。请确保在使用这些样式时，你已经正确地引入了 Tailwind CSS 并将其配置为适用于你的项目。