Created
August 2, 2021 05:44
-
-
Save CodeMyUI/56e07e2de9d828e24ebb6dbb3979813c to your computer and use it in GitHub Desktop.
CSS Strikethrough Text
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
.wrapper | |
h1.strikethrough CSS Strikethrough | |
p.strikethrough Although you can apply #[em .strikethrough] to any element, this works well for paragraph sized text or smaller. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque sequi illum excepturi rerum! Maiores a enim ut ipsa odit illum beatae cupiditate quae, veniam fuga reiciendis, illo similique, eligendi esse. |
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://codepen.io/Squidies/pen/xgJGQQ"></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
/* ~sanitize.css */ | |
/* ~mixins */ | |
@mixin flx_cc | |
display: flex | |
align-items: center | |
justify-content: center | |
/* ~vars */ | |
$white: rgb(244, 244, 244) | |
$black: rgb(22, 22, 22) | |
// styles | |
html, | |
body | |
@include flx_cc | |
flex-direction: column | |
height: 100% | |
background: $black | |
color: $white | |
font-family: 'Open Sans', sans-serif | |
.wrapper | |
@include flx_cc | |
flex-direction: column | |
max-width: 600px | |
margin: 0 auto | |
.strikethrough | |
position: relative | |
display: inline | |
&:before | |
position: absolute | |
content: "" | |
left: 0 | |
top: 50% | |
right: 0 | |
border-top: 2px solid | |
border-color: inherit | |
transform: rotate(8deg) | |
em | |
font-size: .88rem |
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/10up-sanitize.css/5.0.0/sanitize.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment