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


Very nice. Thanks for sharing!

Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.