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