使用Tailwind CSS时CSS伪类:after的悬停效果失效

你当前的代码存在几个关键问题导致悬停效果不生效，逐一修正如下：

• 伪元素内容缺失：after:content-none 会直接让伪元素无法生成，必须设置空内容 after:content-[''] 才能让伪元素正常渲染。
• 伪元素未正确定位：需要给伪元素添加绝对定位，让它铺满链接的底部区域，同时给父元素添加相对定位作为定位参考。
• 组件语法错误：export default Home(){} 不符合React组件定义规范，需修正为标准函数组件写法。

修正后的完整代码 #

export default function Home() {
    // 假设item为已定义的变量
    const item = { href: "#" };
    
    return(
        <a
            href={item.href}
            className="relative px-3 py-2 text-sm font-medium after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:origin-center after:scale-x-0 after:border-b-2 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-white"
            aria-current="current item"
        >
           Item name
        </a>
    )
}

关键修改说明 #

• 给<a>标签添加relative，确保伪元素的绝对定位基于当前链接元素。
• 替换after:content-none为after:content-['']，保证伪元素能被浏览器渲染出来。
• 给伪元素添加after:absolute after:bottom-0 after:left-0 after:w-full，让它横向铺满链接底部，缩放时呈现完整的边框展开效果。

内容的提问来源于stack exchange，提问作者Furkan Öztürk