<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>
</ol>
</section>
body {
color: #333;
font-family: "Nunito", sans-serif;
}
ol{
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);
}
This Pen doesn't use any external CSS resources.