Tailwind CSS :before pseudo class

Question

I've now been working in circles trying to understand what is happening. I'm making a design library using storybook with Tailwind. I can't seem to get the :before pseudo class to work. No matter where I place it in the styling, then it's never rendered.

An example is that I am trying to make a component which uses react-slick, and want to style the navigation:

'& .slick-dots': {
  bottom: -30,
  display: 'block',
  left: 4,
  listStyle: 'none',
  margin: 0,
  padding: 0,
  position: 'absolute',
  textAlign: 'center',
  width: '100%',

  '& li': {
    cursor: 'pointer',
    display: 'inline-block',
    height: 20,
    margin: '0 5px',
    padding: 0,
    position: 'relative',
    width: 20,

     '& button': {
       border: 0,
       background: 'transparent',
       display: 'block',
       height: 20,
       width: 20,
       outline: 'none',
       lineHeight: 0,
       fontSize: 0,
       color: 'transparent',
       padding: 5,
       cursor: 'pointer',

       '&:before': {
        position: 'absolute',
        top: 0,
        left: 0,
        content: '',
        width: 20,
        height: 20,
        fontFamily: 'sans-serif',
        fontSize: 20,
        lineHeight: 20,
        textAlign: 'center',
        color: '#000000',
        opacity: 0.75,
        display: 'inline-block',
      },
    },
  },
},

Solution

Found the problem. The :before pseudo class won't render unless there is content, but in the case of css in js, then content needs to look like this content: '"text"', and not content: 'text',

Comments

[s0xzwasd]

Can you show code snipper or sandbox (jsfiddle, codepen)?

[Akusas]

It's ok, found the problem. The :before pseudo class won't render unless there is content, but in the case of css in js, then content needs to look like this content: '"text"', and not content: 'text',