<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.