自定义CSS删除线

Question

我正在创建一个要显示2个价格的网络应用程序：

• 价格1应该是实际价格。
• 价格2应该是折扣价。

现在，我想显示价格1被取消，类似于下图，但是不知道该使用哪个CSS属性：

感谢您的帮助。

Answer 1

您需要的是一些基本的CSS来使您想要的罢工成为可能。在这种情况下，您可以将cross类添加到旧价格中。

.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);
}

<p>$9.99</p>
<p class="cross">$19.99</p>

来源：This page解释了进一步的罢工。