CSS Strikethrough Text

css-strikethrough-text.markdown

CSS Strikethrough Text

A Pen by Squidies on CodePen.

License.

index.pug

.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.

scripts

<script src="https://codepen.io/Squidies/pen/xgJGQQ"></script>

style.sass

/* ~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

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/5.0.0/sanitize.min.css" rel="stylesheet" />