The pseudo-element :after is not showing itself under react-jss framework

Question

I'm trying to make an underline effect for the li tag using the ::after psuedo-element under the react-jss framework. However, it's not working in the page.

Here's the whole example in code sandbox: https://codesandbox.io/s/confident-taussig-ecif2

And part of the code:

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

and the styling in 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"
      }
    }
  }

---

OK, I've been tracking down this issue, and I saw the solution in Can't target :before Pseudo selector in JSS, and it seems to be the "content" property that is blocking the :after pseudo-element from showing itself.

The answer in that post said that, and I quote,

The content should be a string enclosed in double quotes which in turn should be enclosed in single quotes.

Why is this strange syntax? Is is just in react-jss or it's a common thing is CSS/SCSS?