Responsive Tables in Pure CSS
Pseudo elements, specifically :before and :after, match the virtual first and last children of the selected element. Typically they are used to add cosmetic content like an arrow on a tooltip, create a pretty ribbon, or include an icon font. The uses go further though. You can pull in content from HTML data attributes using content: attr(data-label) on the before/after pseudo classes.
Source: techblog.livingsocial.com