如何在Chakra UI中使用a::hover::after伪元素？

要实现a:hover::after的样式，你之前的_hover_after写法不符合Chakra UI的样式规则，正确方式是嵌套伪类与伪元素：在_hover内部定义_after来控制hover状态下伪元素的样式，同时单独用_after设置伪元素的基础样式。

给你一个完整的可运行示例：

import { Link } from "@chakra-ui/react";

<Link
  position="relative" // 为伪元素定位提供参照
  _after={{
    content: '""', // 必须设置content，伪元素才会被渲染
    position: "absolute",
    bottom: 0,
    left: 0,
    height: "2px",
    width: "0",
    bg: "blue.500",
    transition: "width 0.3s ease",
  }}
  _hover={{
    _after: {
      width: "100%", // hover时修改伪元素宽度，实现下划线展开效果
    },
  }}
>
  悬停查看下划线效果
</Link>

核心注意事项： #

• 伪元素必须设置content属性（哪怕是空字符串），否则浏览器不会渲染这个伪元素。
• 若要对伪元素做绝对定位，务必给Link组件加上position="relative"，避免伪元素脱离目标元素的定位范围。
• 样式嵌套逻辑对应CSS语法：_hover对应:hover伪类，内部的_after对应::after伪元素，组合起来就是a:hover::after的效果。

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