Example
To apply pseudo-elements, simply define them as properties within the style object for the class. Each pseudo-element is written as a key (e.g., "::before") with its styles defined in an inner object. The content property is required for most pseudo-elements, as it specifies what the pseudo-element should display.
const style = st({
componentId: "components/docs/pseudo-elements",
container: {
position: "relative",
"::before": {
content: '"Start"',
position: "absolute",
top: "-20px",
left: "0",
},
"::after": {
content: '"End"',
position: "absolute",
bottom: "-20px",
right: "0",
},
},
highlightedText: {
"::first-line": {
fontWeight: "bold",
},
"::selection": {
backgroundColor: "yellow",
},
},
});
Available Pseudo-Elements
::after
::backdrop
::before
::cue
::file-selector-button
::first-letter
::first-line
::marker
::placeholder
::selection