Perfectly centerd cross-mark

by rwhal06

HTML

<p>
  Hurry! This <span class="strike">$300</span> complimentary offer won’t last long!
</p>
<p>
  Hurry! This <span class="x-overlay">$300</span> complimentary offer won’t last long!
</p>
<p>
  Hurry! This <span class="crossed-out">$300</span> complimentary offer won’t last long!
</p>
<p>
  Hurry! This <span class="crossed-out crossed-out-thick">$300</span> complimentary offer won’t last long!
</p>
<p>
  Hurry! This <span class="x-emoji-overlay">$300</span> complimentary offer won’t last long!
</p>

SCSS

$pFontSize: 24px;
p {
  font-size: $pFontSize;
}
span{
  font-weight: bold;
}
.x-overlay,
.x-emoji-overlay {
  position: relative;
}

.x-overlay,
.x-emoji-overlay {
  &:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: red;
    text-align: center;
  }
}

.x-overlay:after {
  content: '\d7';
  font-size: 3 * $pFontSize;
  line-height: $pFontSize;
  opacity: 0.7;
}

.x-emoji-overlay:after {
  content: "\274c";
  padding: 3px;
  font-size: 1.5 * $pFontSize;
  line-height: $pFontSize;
  opacity: 0.5;
}

.strike {
  position: relative;
  display: inline-block;
}

.strike::before {
  content: '';
  border-bottom: 2px solid red;
  width: 110%;
  position: absolute;
  left: -2px;
  top: 46%;
}

.crossed-out {
  /*inspired by https://www.tjvantoll.com/2013/09/12/building-custom-text-strikethroughs-with-css/*/
  position: relative;
  display: inline-block;
  &::before,
  &::after {
    content: ' ';
    width: 110%;
    height: $pFontSize;
    position: absolute;
    left: -2px;
    top: -50%;
    border-bottom: 1px solid red;
  }
  &::before {
    -webkit-transform: skewY(-20deg);
    transform: skewY(-20deg);
  }
  &::after {    
    -webkit-transform: skewY(20deg);
    transform: skewY(20deg);
  }
}
.crossed-out-thick {
  &::before,
  &::after {
    border-bottom: 2px solid red;
    opacity: 0.7;
  }
}