Looking to add a background strikethrough effect, perhaps for headers like we do here on Spigot? Look no further.
// Markup
<h2 class="strikethrough"><span>My Awesome Headline</span></h2>
// CSS
.strikethrough {
font-size: 13px;
text-align: center;
margin-bottom: 45px;
border-bottom: 1px solid black;
}
.strikethrough span {
background: white;
position:relative;
top: 8px;
padding: 0 15px;
}
You may have to play with the margins, span top position, etc. depending on your font size and or line height. Might as well play with it on CodePen: http://cdpn.io/HsbGu
Thanks to the Super Awesome Since 1988 David Leggett: No-image Strikethrough without <del>
Very nice. Thanks for sharing!
Awesome – thank you!