css pseudo code "li::before" in react inline style

Question

I have a React component called "ExplanationLists", I would like to add dynamic inline style into li html element with css pseudo code li::after, the way I can style the bullet-point with graphic better. For example,

li::before {
    content: dynamic_content;
}

However, I couldn't really make it happen. Any suggestion would be appreciated.

Below is the code I've written.

class ExplanationLists extends Component{
    populateHtml(){
        // asign lists data into variable "items"
        var items = this.props.items; 

        // loop though items and pass dynamic style into li element
        const html = items.map(function(item){
            var divStyle = {
                display: "list-item",
                listStyleImage: 
                    'url(' +  
                    '/images/icons/batchfield_fotograf_rosenheim_icon_' + 
                    item.icon +
                    '.png' +
                    ')'   
            };  

            // html templating 
            return (
                 <li style={divStyle}>
                   <h3 >{item.title}</h3>
                   <p>{item.desc}</p>
                 </li>
            );
        });

        // return html
        return html;
    }

    render(){
        return (
            <ul>
                {this.populateHtml()}
            </ul>
        )
    }
}

Afghani

Why don't you just simple use className at your li element, then styling it with normal CSS ? – Adversaria

Because it's dynamic content, not the same thing every time. Needs to be set via javascript. – Grouch

Answer 1

In your particular case you can use data attributes.

li::before {
  content: attr(data-content);
}

render = () => <li data-content={this.props.content}>{this.props.children}</li>

Palliasse

Super cool. 8 Years in web dev and I just knew this. Thanks mate – Electrodeposit

Hey @Electrodeposit that is so relatable, I learned that myself 5 minutes before posting that answer 😂, though it took me possibly an hour of investigation – Palliasse

Note: attr() evaluates to string. You can't evaluate #ffffff or some other colour to hex like background-color: attr(data-content); – Berryman

@SatbirKira Yes, only content in ::before and ::after is now officially supported. More is in the works developer.mozilla.org/en-US/docs/Web/CSS/attr – Palliasse

Answer 2

No, it's not possible. React style attribute use the HTML style attribute underlyingly, so it cannot have selectors inside it. Like stated in this answer about inline style.

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the CSS core grammar:

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Spillman

Answer 3

1. "&::before": { ...react style here }
2. you must have attribute content: `''`

example:

        content: {
            display: "flex",
            margin: 10,
            "&::before": {
                content: `''`,
                position: 'absolute',
                left: '-50px',
                top: '50px',
                width: '0',
                height: '0',
                border: '50px solid transparent',
                borderTopColor: 'red',
            }
        },

Hope this helps!

Expressage

The question doesn't mention glamorous library, so your answer is misleading.. – Achernar

@KarolisŠarapnickis Sorry that I did not notice the library name, I was able to do like above by creating the app with facebook create-react-app command without any other related library as I remember. – Expressage

Answer 4

React does not have CSS pseudo-elements. The idea is to solve in Javascript way. Put it simply, add a span before or after the DOM element. I find it quite nice, more powerful than CSS. Take a look at a-theme-react I built for example

const beforeImg = (
    <img
        src={screenshot5}
        style={{
            width: '216px',
            marginTop: '87px',
            marginLeft: '79px',
            height: '393px'
        }}
    />
)

export const FormSection = {
    margin: '0 0 10px',
    color: '#262626',
    backgroundColor: '#fff',
    border: '1px solid #e6e6e6',
    borderRadius: '1px',
    textAlign: 'center',
    width: '350px',
    display: 'inline-block',
    verticalAlign: 'middle',
    before: {
        content: beforeImg,
        display: 'inline-block',
        width: '400px',
        height: '560px',
        verticalAlign: 'middle',
        backgroundImage: 'url(' + home_phone + ')',
        backgroundSize: '400px 560px'
    }
}

Then in render method look for .before attribute, render content with styles.

Palingenesis