Pseudo-element ::after

p::after

Insert something after the content of each

element.

::after creates a pseudo-element that is the
last child of the selected element. It is often
used to add cosmetic content to an element with
the content property. It is inline by default.

If the content property is not specified, has an
invalid value, or has normal or none as a value,
then the ::after pseudo-element is not rendered.
It behaves as if display: none is set.

Example

a::after {
  content: ' (' attr(href) ')';
}

.dead-link {
  text-decoration: line-through;
}

.dead-link::after {
  content: url('../../media/warning.svg');
  display: inline-block;
  width: 12px;
  height: 12px;
}

Example tooltip

<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">
    text
  </span>
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">
    tooltips</span
  >.
</p>

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}