html 怎样消除盒子的换行,html – 如何改变CSS中的删除/换行厚度？

这里有一个纯CSS方法，不需要任何不必要的包装元素。作为一个额外的好处，您不仅可以调整删除的厚度，但你可以控制其颜色与文本颜色分开：

.strikeout {

font-size: 4em;

line-height: 1em;

position: relative;

}

.strikeout::after {

border-bottom: 0.125em solid red;

content: "";

left: 0;

margin-top: calc(0.125em / 2 * -1);

position: absolute;

right: 0;

top: 50%;

}

Struck out text

使用RGBa颜色使删除半透明：

.strikeout {

font-size: 4em;

position: relative;

}

.strikeout::after {

border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);

content: "";

left: 0;

line-height: 1em;

margin-top: calc(0.125em / 2 * -1);

position: absolute;

right: 0;

top: 50%;

}

Struck out text

或者甚至使罢工梯度！只需使用背景结合高度，代替边框：

.strikeout {

font-size: 4em;

line-height: 1em;

position: relative;

}

.strikeout::after {

background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1), rgba(255, 255, 255, 0));

content: "";

height: 0.125em;

left: 0;

margin-top: calc(0.125em / 2 * -1);

position: absolute;

right: 0;

top: 50%;

}

Struck out text

这在IE9(无梯度)和向上 – 甚至IE8如果你使用单冒号：后语法和手动写负边距顶值而不是使用calc()。

主要的缺点是，这只工作在一行文本。但嘿，你拿你可以得到;-)