cssProperty and pseudo-element

[iManu]

💬 Questions and Help

Hello Greg,

As we use xstyled in a new project, we're glad to perform with the tool :)

We trying using pseudo element like ::before in the way it is described in the doc, but we cannot make it work.

The code of utilities :

import { style, x } from '@xstyled/styled-components'

export const pseudoEl = x.extend(
  style({
    prop: 'pseudoEl',
    cssProperty: () => ({
      '&::after': {
        content: 'TEST',
        fontSize: '16px',
        position: 'absolute',
        zIndex: 1,
        top: 0,
        left: 0,
      },
    }),
  }),
)

then in component import { pseudoEl as p } from 'utilities'

and in jsx <p.div pseudoEl>Expect ::after in DOM</p.div>

but nothing happens, what is wrong with our code ?

[gregberge]

Hello @iManu, it is a styled-components problem, content must be content: '"TEST"' with double quotes. https://twitter.com/peduarte/status/1361369526613475335