title: Dynamically fill css Pseudo-element 'before' content with Angular2
body: <p>I'm having a hard time trying to dynamically fill the 'content'-value on a <code>:before</code> pseudo-element.
  I've found out it was possible on earlier versions of AngularJS in another question over <a href="https://stackoverflow.com/questions/32208926/generate-css-pseudo-content-for-before-after-dynamically-using-angularjs">here</a>, by creating an extra data attribute on the element that has the <code>before</code>-pseudo element on it, and then read that value using <code>attr()</code> in CSS.</p>
  
  <p>It seems to work just fine when using a plain string as a value:</p>
  
  <pre><code>// CSS
  .test:before {
    content: attr(data-before);
  }
  
  // Template
  &lt;div class="test" data-before="before text goes here"&gt;
    &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when I try to fill the data-before with interpolation like this, I get an error:</p>
  
  <pre><code>// CSS
  .test:before {
    content: attr(data-before);
  }
  
  // Template
  &lt;div class="test" data-before="{{name}}"&gt;
    &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I missing here? The error generated is:</p>
  
  <pre><code>Error: Template parse errors:
  Can't bind to 'before' since it isn't a known property of 'div'.
  </code></pre>
  
  <p>Here's the non-working version in plunker: <a href="http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu" rel="noreferrer">http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu</a></p>