这里有一个纯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()。
主要的缺点是,这只工作在一行文本。但嘿,你拿你可以得到;-)