Adding content via CSS with data attribute - html

Question

I would like to append dates to the end of several strings of text with screens smaller that 500px.
My HTML is:
<div class="left-section" id="activities">
<ul>
<li data-string="September 2012 - May 2014">National Student Advertising Competition</li>
<li data-string="January 2012 - May 2014">Advertising Club</li>
<li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li>
<li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li>
</ul>
</div>
And my CSS in the media query is:
#activities:after {
content: " - " attr(data-string);
}
All that displays are the strings and then after the list is the " - "

Answer 1

You need a space and * before the :after to get everything inside #activities like this:
#activities *:after {
content: " - " attr(data-string);
}
<div class="left-section" id="activities">
<ul>
<li data-string="September 2012 - May 2014">National Student Advertising Competition</li>
<li data-string="January 2012 - May 2014">Advertising Club</li>
<li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li>
<li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li>
</ul>
</div>
Hope it helped!