title: Using regular expression in CSS pseudo element
body: <p>Not sure this is possible with CSS only, can the <code>content</code> of a pseudo selector contain a regular expression?</p>
  <p>In this scenario:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.normal-class::before {
    /*content: attr(class); =&gt; this works, but outputs both classes */
  }
  
  
  /*  
  DOES NOT WORK
  .normal-class::before {
    content: attr(class[^=special]); 
  }*/
  
  /*  
  DOES NOT WORK
  .normal-class::before {
    content: attr(class^=special);
  }
  */
  
  /*  
  DOES NOT WORK
  .normal-class::before {
    content: attr(class^=['special']);
  }
  */
  
  .normal-class::before {
    content: attr([class^="special"]); /* NOT WORKING EITHER */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="special-class normal-class"&gt;&lt;/div&gt;
  
  DESIRED OUTPUT:&lt;br&gt;
  special-class</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks.</p>