Adding content via CSS with data attribute

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!