Syntax

Description: element is defined as a pseudo-class or pseudo-element whose <identifier> does not alter the state.

ctr('<#selector>', {
element: {
key: '<identifier>'
<...>: <...>
}
})
<#selector>:
element:
key: <identifier>
<...>: <...>
<#selector>:<identifier> {
<...>: <...>;
}

Notes

Basic

Description: The element Object creates a pseudo-class or pseudo-element for the <identifier> at the scope level it is defined.

Edit
ctr('.test', {
width: 200px
element: {
key: 'before'
content: 'ctr'
font-size: 1em
}
})
.test:
width: 200px
element:
key: before
content: ctr
font-size: 1em
.test {
width: 200px;
}
.test::before {
font-size: 1em;
content: "ctr";
}
ctr('.test', {
  width: 200px
  element: {
    key: 'before'
    content: 'ctr'
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test::before {
  font-size: 1em;
  content: "ctr";
}
.test:
  width: 200px
  element:
    key: before
    content: ctr
    font-size: 1em

Notes