CSS-styled strikethrough

The CSS specification lets you specify line-through as a property on a text element, but it doesn’t give you much control over it.  Unlike CSS borders, you can’t control the color (except in Firefox) or thickness of that line.

However, we can simulate this using a CSS :after element. We can even slant the strikethrough line a little, if we’re so inclined (ha!):

s, strike {
  text-decoration: none;/* replacing line-through default */
  position: relative;
  display: inline-block; /* keep it on one line */
}
s:after, strike:after {
  content: "";  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;  /* adjust depending on line thickness */
     /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px); /* half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}

http://jsfiddle.net/mblase75/zd174wb4/

If you want your text to wrap across multiple lines, we need a different approach. By using a wrapper element we can change the color of the line, but not anything else:

.strike-wrapper {
  text-decoration: line-through;
  color: red;
}
.strike-wrapper s, .strike-wrapper strike {
  text-decoration: none; /*replacing line-through default*/
  color: black;
}

http://jsfiddle.net/mblase75/8f3zugja/

Leave a Reply

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

*