在React中记录：“：hover：after”

Question

如何在React中设置: hover: after？我搜索了stackoverflow，但只找到了设置方法hover。我没有同时记录: hover: after

class Todo extends React.Component {
  render() {
    const  Background = this.props.todo.avatar;
    const  name = this.props.todo.name;


  const profile = {
     backgroundImage: `url(${Background})`,

    "&:hover&:after": {
      position: "absolute",
      content: `attr(${name})`,
      background: "rgba(255, 255, 255, .95)",
      color: "inherit",
      fontSize: "10px",
      padding: "4px",
      width: "100px",
      height: "100px",
      bottom: "-0.5rem",
      right: "-0.5rem",
      boxShadow: "0px 5px 12px rgba(0, 0, 0, .12)",
      opacity: "0",
      borderRadius: "0.15rem",
      animation: "fade 100ms ease 750ms forwards"   
    } 
  }

    return (
        <div style={{profile}}></div>
    );
  }
}