How to Strike Through Obliquely with CSS

How to strike through obliquely with css

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>

How to strike through obliquely with css showing the text on top of the strike through

To move something behind the other you need to give it a z-index that is lower than the other element, in this case I gave the strike a z-index of -1

http://jsfiddle.net/p2F7G/1/

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: #F00;
  z-index: -1;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

CSS strikethrough different color from text?

Yes, by adding an extra wrapping element. Assign the desired line-through color to an outer element, then the desired text color to the inner element. For example:

<span style='color:red;text-decoration:line-through'>

  <span style='color:black'>black with red strikethrough</span>

</span>

Diagonal line through div or span

Is first fiddle as example with image in background instead not good enough?

http://jsfiddle.net/zw3Ve/410/

.line {
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;
}

CSS strikethrough effect, Firefox issue

FF is known to have some strange behaviors with absolute elements inside element with display of table-cell.

The following setting might do the work (but it might cause some other problems with the table cells):

.strikethrough
{
    display: inline-block;
}

jsFiddle Demo

CSS cross through an element

You could use :before and :after in combination with transforms to put an X over the entire div: DEMO

.container {
    position: relative;
    background: gray;
    padding: 30px;
    overflow: hidden; //hide overflow of pseudo elements
}

.container:before, .container:after {
    position: absolute;
    content: '';
    background: red;
    display: block;
    width: 100%;
    height: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    //center the X vertically and horizontally:
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.container:after {
    -webkit-transform: rotate(45deg);    
    transform: rotate(45deg);
}

I want my text strike through extend on whitespace

I haven't found any solution but with your last option means adding first and last character as . with space you can try one thing. Either set the NSForegroundColorAttributeName of that first and last character to your background color of label or set the NSFontAttributeName with UIFont.systemFont(ofSize: 0.1). So it will be goes like this. You haven't specify your answer language so i'm posting answer in latest Swift 3.

let attributedText = NSMutableAttributedString(string: self.lbl.text!)
attributedText.addAttributes([NSStrikethroughStyleAttributeName: 2], range: NSMakeRange(0, self.lbl.text!.characters.count))
self.lbl.attributedText = attributedText

Before using NSForegroundColorAttributeName & NSFontAttributeName

Now you can use either NSForegroundColorAttributeName or NSFontAttributeName to hide first and last dot(.) character.

let attributedText = NSMutableAttributedString(string: self.lbl.text!)
attributedText.addAttributes([NSStrikethroughStyleAttributeName: 2], range: NSMakeRange(0, self.lbl.text!.characters.count))
attributedText.addAttributes([NSForegroundColorAttributeName: UIColor.white], range: NSMakeRange(0, 1))
attributedText.addAttributes([NSForegroundColorAttributeName: UIColor.white], range: NSMakeRange(self.lbl.text!.characters.count - 1, 1))
//Or either Set NSFontAttributeName instead of NSForegroundColorAttributeName
//attributedText.addAttributes([NSFontAttributeName: UIFont.systemFont(ofSize: 0.1)], range: NSMakeRange(0, 1))
//attributedText.addAttributes([NSFontAttributeName: UIFont.systemFont(ofSize: 0.1)], range: NSMakeRange(self.lbl.text!.characters.count - 1, 1))
self.lbl.attributedText = attributedText

After using NSForegroundColorAttributeName or NSFontAttributeName

---

Related Topics