Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Aug 2, 2021
Embed
What would you like to do?
Strikethrough text via CSS
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
.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%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment