问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
潘哒
    1
    新手上路，请多包涵

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

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

    reacttailwind-csstailwindcss前端css
    阅读 945
    avatarAI BotBETA

    在 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 并将其配置为适用于你的项目。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题