title: Dynamic url as data-attribute of pseudo-element in css and D3JS
body: <p>I have to change dynamically the icon url of a list of links in the css pseudo-element. I think the best way is to pass the link of the selected icon by an attribute, but I can't get it working as a url.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>a[data-icon]:before{
  padding-right: 5px;
  padding-top: 5px;
  content:url(attr(data-icon)); 
  }
  </code></pre>
  
  <p><strong>D3JS</strong> (where I retreive the iconURL)</p>
  
  <pre><code> for (var i = 0; i &lt; JSONclassesInfo.typesList.length; i++){
        if (JSONclassesInfo.typesList[i].name == type){
  
         temp = JSONclassesInfo.typesList[i].compatible;
         iconRoute= JSONclassesInfo.typesList[i].icon;
        }
      }
  
      for(var i = 0; i &lt; temp.length; i++){
                  d3.select('.dropdown')
                      .append("li")
                      .attr('class','listOpt')
                      .append('a')
                      .text(temp[i])
                      .attr("href","#")
                      .attr('data-icon',iconRoute);
  
  
                }
  </code></pre>