自定义 CSS 删除线

Question

我正在创建一个网络应用程序，我想在其中显示 2 个价格：

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

现在我想将价格 1 显示为已取消，类似于下图，但不知道要使用哪个 CSS 属性:

感谢任何帮助。

Answer 1

您需要的是一些基本的 CSS 来进行您想要的击球。在这种情况下，您可以将 cross class 添加到旧价格。

.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>.99</p>
<p class="cross">.99</p>

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

自定义 CSS 删除线

Custom CSS Strikethrough

html

css

border