.joke::before {
  content: "<joke> "
}
.joke::after {
  content: " </joke>"
}

.sarcasm::before {
  content: "<sarcasm> "
}
.sarcasm::after {
  content: " </sarcasm>"
}

.marginalia-left {
  max-width: 20em;
  background: yellow;
  padding: 0.5rem;
  margin-right: 0.5rem;
  float: left;
  font-style: italic;
}

/**
 * Align marginalia to the right of the text.
 */
.marginalia-right {
  max-width: 20em;
  background: yellow;
  padding: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  font-style: italic;
}