CSSの擬似コード "li :: before"の反応インラインスタイル

Question

私はリアクションコンポーネント "説明リスト"を持っています。liのCSSインラインコードをli::afterのhtml要素に追加したいと思います。より良いグラフィックで弾丸ポイント。たとえば、

li::before { 
    content: dynamic_content; 
} 

ただし、実際には起こりえませんでした。どんな提案もありがとうございます。

以下は私が書いたコードです。

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> 
     ) 
    } 
} 

Answer 1

いいえ、不可能です。 React styleアトリビュートは、HTML styleアトリビュートを使用しています。そのため、内部にセレクタを持つことはできません。このanswerのようにインラインスタイルについて

スタイル属性の値は、形式文法CSSコア文法の用語や慣習に以下のとおりである（括弧区切りを除く）CSS宣言ブロックの内容の構文と一致する必要があります。

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

Answer 2

リアクションにはCSS疑似要素がありません。アイデアはJavascriptの方法で解決することです。 DOM要素の前後にspanを追加するだけです。私はそれがCSSよりも優れていることが分かります。私はrender方法に続いて、たとえば

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' 
    } 
} 

を建てa-theme-reactを見てみましょスタイルでcontentをレンダリングし、.before属性を探します。