Can't target :before Pseudo selector in JSS

Question

I am trying to target the after pseudo selector of an element on my page. I am trying out JSS for this project and am a huge fan so far, but still very new to it. I am having troubles selecting the :after selected with JSS. Is this possible because I thought it was when reading the docs.

This is my mark up:

<Link to="about" className={classes.link}>About</Link>

and my JSS looks like this:

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

if anyone who is familiar with JSS could help, that would be great!

Answer 1

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

Answer 2

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.