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 Comments

  1. Luis Fernando on May 26, 2013 at 11:35 pm

    Very nice. Thanks for sharing!

  2. Patrick Hess on June 28, 2013 at 4:45 pm

    Awesome – thank you!

Leave a Comment