Pseudos

Morfeo's styling system aims to substitute completely CSS, which means that everything you can do with CSS you can also do with Morfeo - and pseudo classes/elements are just one of the cases where you can have the full power of type-safely styling while having all the freedom to write complex and nested style, let's start with a simple example:

const classes = morfeo.css({
  button: {
    bg: 'primary',
    radius: 'm',
    px: 'm',
    py: 's',
    transition: 'fast',
    '&:hover': {
      bg: 'primary.light',
    },
  },
});
 
export function Button(props) {
  return <button {...props} className={classes('button', props.className)} />;
}

This will result in something like:

Pseudo Classes

With the same principles, we can use the same concepts with any pseudo-classes:

const classes = morfeo.css({
  button: {
    bg: 'primary',
    radius: 'm',
    px: 'm',
    py: 's',
    transition: 'fast',
    '&:disabled': {
      opacity: 'light',
      cursor: 'not-allowed',
    },
  },
});

Instead of &:disable or &:hover you can of course use any pseudo-class, check the MDN page (opens in a new tab) for a complete list

Pseudo Elements

Pseudo-Elements works in the same way:

const classes = morfeo.css({
  paragraph: {
    color: 'text',
    '&::first-line': {
      textTransform: 'uppercase',
    },
  },
});

For a complete list of all the available pseudo-elements, check the MDN page (opens in a new tab).

Mix of both

You can also combine pseduo-classes and pseudo-elements together:

const classes = morfeo.css({
  tag: {
    position: 'relative',
    '&:hover': {
      '&::after': {
        content: "'Show more ->'",
        position: 'absolute',
      },
    },
  },
});