Pseudo-elements

The builder lacks pseudo-elements


From :bust_in_silhouette: Raymond Nash

We're planning to add those, partly they will be available on the Props panel and partly in the code editor.

Now you can do it this way

import React from 'react';
import { Box, Text } from '@quarkly/widgets';
import { useOverrides } from '@quarkly/components';

const overrides = {
  test: {
    kind: 'Box',
    props: {
      'after-content': '" Box!"',
      display: 'inline',
    }
  }
}

const Test = props => {
  const { override, rest } = useOverrides(props, overrides);
  
  return (
    <Box
      before-content="'Say '"
      {...rest}
    >
      <Text {...override('test')}>hello</Text>
    </Box>
  )
};

export default Object.assign(Test, {
  title: 'Test Component',
  effects: {
    before: ":before"
  }
});