Strikethrough without images

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>

2 thoughts on “Strikethrough without images

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready for a refreshing experience on your next website design?