<input id="reveal" type="checkbox"><label for="reveal">Show Edit Times</label>

<p>Dear Laura,</p>
<p>Ever since<ins cite="#edit1" datetime="2020-11-01T14:17:00EST"> the day you brought a peanut butter and banana sandwich to lunch in</ins> second grade, I've been in love with you<del cite="#edit2" datetime="2020-11-01T14:18:00EST"> and followed you everywhere you go</del>.</p>

<p>Now, dearest Laura, let me list all the ways I love <mark>cheese</mark></p>
<ol>
  <li>Gorgonzola</li>
  <li>Limburger</li>
  <li>Cake</li>
  <li>Muenster</li>
</ol>

<div class="edits">
  <h2>Changes</h2>
  <ol>
    <li id="edit1">This tells the reader why you've fallen in love.</li>
    <li id="edit2">Um, just no.</li>
  </ol>
</div>
body {
  padding: 2rem;
}

#reveal:checked ~ p del::after {
  content: attr(datetime);
  text-decoration: none;
  padding: 0 0.5em;
  display: inline-block;
  background-color: rgba(255, 0, 0, 0.25);
}
#reveal:checked ~ p ins::after {
  content: attr(datetime);
  text-decoration: none;
  padding: 0 0.5em;
  display: inline-block;
  background-color: rgba(0, 255, 0, 0.25);
}

.edits {
  background: #eaeaea;
  border-radius: 8px;
  padding: 0.5rem 1rem;
}

input {
  margin-bottom: 3rem;
}

label {
  margin-left: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.