<ins>

<p>&ldquo;You're late!&rdquo;</p>
<del>
  <p>&ldquo;I apologize for the delay.&rdquo;</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
  <p>&ldquo;A wizard is never late &hellip;&rdquo;</p>
</ins>

del,
ins {
  display: block;
  text-decoration: none;
  position: relative;
}
del {
  background-color: #fbb;
}
ins {
  background-color: #d4fcbc;
}
del::before,
ins::before {
  position: absolute;
  left: 0.5rem;
  font-family: monospace;
}
del::before {
  content: "−";
}
ins::before {
  content: "+";
}
p {
  margin: 0 1.8rem 0;
  font-family: Georgia, serif;
  font-size: 1rem;
}

<ins>This text has been inserted</ins>

ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
ins::before {
  content: " [挿入開始] ";
}
ins::after {
  content: " [挿入終了] ";
}