How do I style part of the pseudo element content: "..." - html

Question

I am inserting a FontAwesome icon along with some text from the data attribute in a div pseudo element:
<div data-date="Mar 01, 2016"></div>
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
}
https://jsfiddle.net/cn0vhns9/
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?

Answer 1

It is possible even in your case. Please, see the updated fiddle at https://jsfiddle.net/cn0vhns9/3/. You will have to style the icon as a pseudo-element (::first-letter, or alternatively :first-letter with just a single semicolon for compatibility reasons).
My answer only demonstartes the problem with different font-size.
CSS
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size: 20px;
}
div::first-letter {
font-size: 40px;
font-family: "FontAwesome", sans-serif;
}
HTML
<div data-date="Mar 01, 2016">
</div>
However, I consider this solution to be a bit hacky. Most likely I would separate the icon and the date and place each of them into a separate HTML tag if possible.

Answer 2

You can use another pseudo element:
div:before {
content: "\f073" ;
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size:2em;
}
div:after
{
content:attr(data-date);
display:block;
border-top:1px solid black;
}