Offsite link style

by Jake

HTML

<p>Additional information about: <a class="offsite-link" href="https://support.google.com/mail/answer/2819488?co=GENIE.Platform%3DDesktop&amp;hl=en">Send or unsend Gmail<br>messages</a>&nbsp;can be found on the Google Help&nbsp;website.</p>
<hr>
<p>Additional information about: <a class="offsite-link2" href="https://support.google.com/mail/answer/2819488?co=GENIE.Platform%3DDesktop&amp;hl=en">Send or unsend Gmail<br>messages</a>&nbsp;can be found on the Google Help&nbsp;website.</p>

CSS

.offsite-link {
  position: relative;
  margin-right: 20px;
  //display: inline-block;
  }

.offsite-link:after {
  background-image: url("//www.bates.edu/wp-content/themes/b/bates-framework/styles/images/icons/offsite-link.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 10px;
  width: 10px;
  top: 3px;
  right: -16px;
  opacity: .5;
  content: '';
  display: block;
  position: absolute; }

.offsite-link2 {
  background-image: url("//www.bates.edu/wp-content/themes/b/bates-framework/styles/images/icons/offsite-link.svg");
  background-repeat: no-repeat;
  background-size: 9px;
  background-position: top right;
  padding-right: 13px;
}