Jaroslav KlimĨík Jaroslav KlimĨík - 1 year ago 103
CSS Question

How to strike through obliquely with css

I need something like this:

How can achieve this with css? I know that one way is use background image, but can I achieve this only with css without any image?

Answer Source

There is a hacky way to do this, using the :before pseudo element. You give the :before a border, then rotate it with a CSS transform. Doing it this way adds no extra elements to the DOM, and adding/removing the strikethrough is a simple as adding/removing the class.

Here's a demo


  • This will only work down to IE8. IE7 does not support :before, however will degrade gracefully in browsers that do support :before but don't support CSS transforms.
  • The angle of rotation is fixed. If the text is longer, the line will not touch the corners of the text. Be mindful of this.


.strikethrough {
  position: relative;
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;



<span class="strikethrough">Deleted text</span>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download