Inline Text Correction

by jstnlowe

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet convallis ultricies. Curabitur ultrices mauris erat. Vivamus vitae odio feugiat, <span class="crossedout">Chuck Norris</span><span class="correction">pharetra tellus</span> non, egestas lectus. Pellentesque euismod sapien ante, at ultrices odio finibus eu. Praesent ut nisi quam. Vivamus lobortis eros at auctor placerat. Suspendisse hendrerit condimentum massa feugiat iaculis. Curabitur elit magna, condimentum ac elementum ut, tincidunt in ante. Morbi gravida lectus tempor felis tincidunt, in pulvinar elit ullamcorper.
</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace');      
.crossedout {
position: relative;
display: inline-block;
text-decoration: none;
}
.crossedout::before, crossedout::after {
content: '';
width: 100%;
position: absolute;
margin-left: -0.5em;
top: 0.55em;
opacity: 0.7
}
.crossedout::before {
border-bottom: 3px solid #C51200;
transform: skewY(-3deg);
transform: skewY(-2deg);
}
.correction {
position:absolute;
margin:-0.7em 0 0 -5em;
font-family: 'Covered By Your Grace', cursive;
text-transform: lowercase;
font-weight: bold;
font-size: 1.4em;
color: #C51200;
}