css - 划掉文本 CSS

Question

我需要为网站划掉此文本，如图所示。有谁知道如何做到这一点？

Answer 1

您可以使用 :before 和 :after 伪元素来创建线条和 transform:rotate()

div {
  font-size: 35px;
  color: #aaa;
  position: relative;
  display: inline-block;
}
sup {
  font-size: 20px;
}
div:after,
div:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
}
div:before {
  transform: rotate(20deg);
}
div:after {
  transform: rotate(-20deg);
}

<div>$345<sup>.87</sup>
</div>