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.