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!

I want to achieve a hover effect which basically animates a line across the bottom of a link, from left to right. Which is super easy if I can use the :before @guest271314 — Brady, Dec 05 '16 at 02:41
You can use `css` `:hover` and `animation` to create an affect at hover of an element. Have not tried `jss` or `react`, though it is possible can get and set `css` `:before` or `:after` pseudo elements using `javascript`. — guest271314, Dec 05 '16 at 02:58
Yeah I have worked with React for quite a bit now, just a first timer for JSS. I know how to do this with CSS no problem and last resort will. I just am wondering if its possible to do it with just JSS be so far I haven't had to include a css file into my app yet and im hoping to keep it that way if possible. — Brady, Dec 05 '16 at 03:14

score 145 · Accepted Answer · answered Dec 05 '16 at 04:00

145

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

answered Dec 05 '16 at 04:00

Nishanth Matha

5,993
2
19
28

1

I was about to install a nested JSS package and all the headaches with it, thanks for this awesome suggestion! – GoreDefex Apr 04 '18 at 20:10
2

Because I have stumbled upon this question several times trying to debug, I thought I'd add here that if your content contains escape chars, you need to double escape. For example: ```content: '"\\A"'``` – Blaine Garrett Jul 24 '18 at 02:04

score 3 · Answer 2 · answered Feb 25 '19 at 11:09

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.

Can't target :before Pseudo selector in JSS

2 Answers2

Linked