<section class="style-1">
  <ol id="quotes">
    <li><p>The early bird catches <del>the worm</del><ins>less sleep</ins>.</p></li>
    <li><p>The best things in life are <del>free</del><ins>extremely expensive</ins>.</p></li>
    <li><p>Shoot for the moon. Even if you miss, you'll <del>land among the stars</del><ins>suffocate in outer space and die</ins>.</p></li>
    <li><p><del>Everything</del><ins>Nothing</ins> is going to be fine.</p></li>
    <li><p>Big girls don't <del>cry</del><ins>submit to people telling them what to do</ins>.</p></li>

body {
  color: #333;
  font-family: "Nunito", sans-serif;
  box-sizing: border-box;
  list-style-position: inside;
  padding: 0;
  border-bottom: 1px solid #aaa;
  margin: 0;
li {
  padding: 10px 15px;
  border-top: 1px solid #aaa;
p {
  display: inline-block;
  margin: 0;

del {
  position: relative;
  text-decoration: none;
del:before {
  content: "";
  background: #a30000;
  height: 1px;
  position: absolute;
  left: -3px;
  top: 50%;
  width: 90%;
  transform: rotate(1deg);
del:after {
  content: "";
  background: #a30000;
  height: 1.25px;
  position: absolute;
  right: 3px;
  bottom: 32%;
  width: 95%;
  transform: rotate(-0.25deg);
ins {
  color: #a30000;
  font-family: 'Caveat', cursive;
  font-size: 1.25em;
  text-decoration: none;
  position: absolute;
  margin-top: -20px;
  margin-left: -50px;
  transform: rotate(-4.5deg);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js