reactjs - 伪元素 :after 在 react-jss 框架下没有显示出来

Question

我正在尝试li使用 react-jss 框架下的 ::after 伪元素为标签添加下划线效果。但是，它在页面中不起作用。

这是代码沙箱中的整个示例： https ://codesandbox.io/s/confident-taussig-ecif2

以及部分代码：

          <ul>
            <li>
              <a href="">Page1</a>
            </li>
            <li>
              <a href="">Page2</a>
            </li>
            <li>
              <a href="">Page3</a>
            </li>
            <li>
              <a href="">Page4</a>
            </li>
          </ul>

以及 react-jss 中的样式：

"& > ul": {
    display: "flex",
    height: "100%",
    flexDirection: "row",
    position: "relative",

    "& li": {
      display: "flex",
      listStyle: "none",
      justifyContent: "center",
      alignItems: "center",
      overflow: "visible"
    },

    "& > li": {
      width: "80px",
      height: "100%",
      padding: "0 10px",
      position: "relative",

      "& a": {
        color: "black",
        textDecoration: "none"
      },

      "&:after": {
        content: "",
        position: "absolute",
        bottom: 0,
        left: 0,
        display: "block",
        width: "80px",
        height: "1px",
        backgroundColor: "black",
        zIndex: "99"
      }
    }
  }

---

好的，我一直在追踪这个问题，我在Can't target :before Pseudo selector in JSS中看到了解决方案，它似乎是阻止 :after 伪元素显示自身的“内容”属性.

那篇文章中的答案是这样说的，我引用，

内容应该是用双引号括起来的字符串，而双引号又应该用单引号括起来。

为什么会出现这种奇怪的语法？只是在 react-jss 中还是 CSS/SCSS 很常见？

标签： reactjspseudo-elementcss-in-js