htmlcssimagestrikethrough

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?


Solution

  • 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

    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>