Псевдоэлемент :after не показывает себя в среде react-jss

Я пытаюсь сделать эффект подчеркивания для тега li, используя псевдоэлемент ::after в рамках фреймворка react-jss. Однако он не работает на странице.

Вот весь пример в песочнице кода: 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>

и стиль в реакции-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 Псевдоселектор в JSS, и, похоже, это свойство содержимого, которое блокирует отображение псевдоэлемента :after.

Ответ в том посте сказал, что, и я цитирую,

Содержимое должно быть строкой, заключенной в двойные кавычки, которая, в свою очередь, должна быть заключена в одинарные кавычки.

Почему такой странный синтаксис? Это только в реакции-jss или это обычное дело - CSS/SCSS?