Material-ui: How do i add ":before" or ":after" with use withStyle

[Sayid1]

import { withStyles } from "@material-ui/core/styles"
const styles = theme => ({
  footer: {
    marginTop: 200,
    width: "100vw",
    height: 2,
    background: "gray",
    position: "relative",
    "&:before": {
      position: "absolute",
      content: " ",
      top: 0,
      left: 0,
      right: 0,
      width: "30%",
      height: 2,
      background: "red"
    }
  }
});
function Progress({ classes }) {
  return <div className={classes.footer} />;
}
withStyles(styles)(Progress)

':before' is not work!
online example: https://codesandbox.io/s/70p7ppvq

please help me!

• @material-ui/core: 3.8.3
• React: 16.7.0-alpha.2
• Browser: Chrome 71.0

[joshwooding]

With JSS you have to use content: '""' or content:"''" but content: "''" might cause crashes in IE https://github.com/cssinjs/jss/issues/242#issuecomment-261735197

Fixed example: https://codesandbox.io/s/wk44jxzjol

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.