Home/ Questions/Q 9239025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T07:53:36+00:00

I need something like this: How can achieve this with css? I know that

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    Caveats

    • 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.

    CSS

    .strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

    HTML

    <span class="strikethrough">Deleted text</span>
    • 0