Strikethrough text via CSS

index.html

<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<h2>Text Strikethrough</h2>
			<span class="strikethrough">Deleted text</span>
			<br><br>
			<p>A Strikethrough can be useful in various situations. It's very easy to add a strikethrough to your text via CSS Stylesheets.</p>
			<p><i>Please note, that in some earlier versions of Internet Explorer; the strikethrough won't work.</i></p>
		</div>
	</div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

strikethrough-text-via-css.markdown

Strikethrough text via CSS

Text Strikethrough via CSS diagonal strikethrough via CSS

A Pen by JhWebDev on CodePen.

License.

style.css

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid #dd0031!important;
  border-color: inherit;

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

/*********************
BASE STYLE for Aesthetics Only
*********************/

body {
	background-color: #e6e7e8;
	color: #000000;
	margin-top: 3%;
}

.container {
	background-color: #ffffff;
	width: 75%;
	padding: 1.5%;
}

h2 {
	color: #F79420;
	padding-bottom: 1.5%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />