How do I make :before render in the DOM?

Question

I can't figure out how to make :before render in the DOM.

I tried this:

const inline = {
    backgroundColor: "yellow",
    width: "100px",
    height: "30px",
    display: "inline-block",
    position: "relative",
    "&::before": {
        content: '"Good Day"',
        position: "absolute",
        left: "-50px",
        top: "50px",
    },
}

return (
    <p style={style}>
        Lorem ipsum dolor sit amet, <i style={inline}></i>consectetur
        adipiscing elit, sed do<i style={inline}></i> eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        <i style={inline}></i>
    </p>
)

the styling of the i elements works as expected, except for the :before that is not rendered.

Any tip on how t accomplish this would be much appreciated

The ampersand is a part of SCSS/SASS/LESS, not the raw CSS that React can understand. There is no syntax that allows ":before" applied as an inline style, as in [this SO answer](https://stackoverflow.com/q/14141374/1426891). — Jeff Bowman, Mar 30 '23 at 18:31

score 1 · Answer 1 · answered Mar 30 '23 at 18:36

const inline = { /* ... */
    "&::before": { /* ... */ },
}

The ampersand ("parent selector") is a part of SCSS/SASS/LESS, not the raw CSS properties that React can understand.

There is no syntax that allows ":before" applied as an inline style, as in this SO answer, nor through JavaScript manipulation as in this SO answer.

score 1 · Answer 2 · answered Mar 30 '23 at 18:37

Inline css styles do not support pseudo elements (they are not part of the element itself). The only way to apply style to pseudo elements is using css declarations (eg: setting an id and setup a css declaration with #id::before{ }).

One option for reactjs components is to use an explicit tag that works like :before (or :after) pseudo element, adding it to the start or end of the element content. Eg:

const inline = {
    backgroundColor: "yellow",
    width: "100px",
    height: "30px",
    display: "inline-block",
    position: "relative",
}

const before = {
        position: "absolute",
        left: "-50px",
        top: "50px",
}

return (
    <p style={style}>
        Lorem ipsum dolor sit amet, <i style={inline}></i>consectetur
        adipiscing elit, sed do<i style={inline}></i> eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        <i style={inline}><div style={before}>"Good Day"</div>Content</i>
    </p>
)

How do I make :before render in the DOM?

2 Answers2