Can't target :before Pseudo selector in JSS

What you did is right. Except for 2 things:

1) Syntax error: You're missing a comma after the entry fontFamily: fonts.family.primary

2) The content should be a string enclosed in double quotes which in turn should be enclosed in single quotes. So, an empty content would be content: '""',

So just try the following:

link: {
    position: 'relative',
    fontFamily: fonts.family.primary,
    '&:before': {
        content: '""',
        position: 'absolute',
        bottom: 0,
        left: 50,
        width: '100%',
        height: '1rem',
        display: 'block',
        background:styles.colors.white
    }
}

Seems like a good place to add this too...

If you want to add a symbol (like an ") to the content: then this did the trick for me:

// symbol
const $quoteSym = '"';

// jss class
quote: {
   color: 'white',
   position: 'relative',
   padding: '2rem',
   '&:before': {
      display: 'inline-block',
      content: `'${$quoteSym}'`,
   },
},

Looks a little hacky but the encapsulation method/order, with regards to what type of quotes you use, seems to make a difference.