<p>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr> is a U.S. government agency that is
  responsible for science and technology related to air and space.
</p>

abbr {
  color: chocolate;
}

@media (hover: hover) {
  abbr:hover {
    color: limegreen;
    transition-duration: 1s;
  }
}

@media not all and (hover: hover) {
  abbr::after {
    content: ' (' attr(title) ')';
  }
}