a.external {
  position: relative;
}

a.external::after {
  font-size: 0.8em;
  color: #555;
  margin-left: 0.2em;
}

a.external:hover::before {
  content: "↗ Opens in a new tab";
  position: absolute;
  bottom: 125%;
  left: 0;
  background: #333;
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.75em;
  white-space: nowrap;
  z-index: 10;
}