title: How do I style part of the pseudo element content: "..."
body: <p>I am inserting a FontAwesome icon along with some text from the data attribute in a div pseudo element: </p>
  
  <pre><code>&lt;div data-date="Mar 01, 2016"&gt;&lt;/div&gt;
  
  div:before {
    content: "\f073" attr(data-date);
    font-family: "FontAwesome", sans-serif;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/cn0vhns9/" rel="nofollow">https://jsfiddle.net/cn0vhns9/</a></p>
  
  <p>Now what I want is to increase the size of the icon and put the text right under it with some margin. While putting the text content under the icon seems achievable (if I fix the width of the pseudo element), I can't think of the way to increase the size of the icon without increasing the size of the text content as well. Any ideas? </p>