划掉文字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>

Answer 2

您可以使用::before和::after转换属性来实现此结果：

<p class="dotd">deal of the day: </p>
<h1 class="cross">$341,95</h1>

.dotd {
     color: red;
}
.cross {
    position: relative;
    display: inline-block;
}
.cross::before, .cross::after {
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
}
.cross::before {
    border-bottom: 2px solid red;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
}
.cross::after {
    border-bottom: 2px solid red;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
}

js fiddle：https://jsfiddle.net/shx3n4ho/1/

Answer 3

检查

p{
  font-size:25px;
  display:block
}
.cross {
    position: relative;
    display: inline-block;
}
.cross::before, .cross::after {
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
}
.cross::before {
    border-bottom: 2px solid gray;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
}
.cross::after {
    border-bottom: 2px solid gray;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
}

<p>
Deal of the day
<span class="cross">365</span>
</p>