mobile friendly responsive abbreviation elements

responsive abbreviations and links

abbr[title]:after  // after an abbr element with title attribute 
{
   content: " (" attr(title) ")";  // display the title attribute value in parentheses
}

@media screen and (min-width: 1025px)  // above 1025px screen width
{
   abbr[title]
   {
      border-bottom: 1px dashed #ADADAD; // draw a dashed border under the abbr element
      cursor:help; // add a help question mark to the mouse cursor
   }

   abbr[title]:after
   {
      content: ""; // clears the parentheses and attribute values after the abbr element.
   }
}

// you can also use this to make links viewable on print stylesheets like HTML5 boilerplate