Text Strikethrough via CSS diagonal strikethrough via CSS
Created
August 2, 2021 05:43
-
-
Save CodeMyUI/f9522105eb8d583ef5697c58a2130da0 to your computer and use it in GitHub Desktop.
Strikethrough text via CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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%; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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