如何更改CSS中的删除/穿透厚度？

Question

我正在使用text-decoration: line-throughCSS,但我似乎无法找到任何方法来改变线条厚度,没有不雅的黑客像<hr>或图像叠加.

是否有任何优雅的方法来指定直通的厚度？

Answer 1

这是一个纯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%;
}

<span class="strikeout">Struck out text</span>

使用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%;
}

<span class="strikeout">Struck out text</span>

或者甚至使三角形渐变!只需使用一个background具有组合height,取代的border:

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

<span class="strikeout">Struck out text</span>

这适用于IE9(无渐变)和向上 - 甚至IE8,如果您使用单冒号:after语法并手动写入负值margin-top而不是使用calc().

主要缺点是这只适用于单行文本.但是,嘿,你拿走你能得到的东西;-)

Answer 2

这似乎是一个长期存在的问题,没有多线删除线的理想解决方案.

方便地,使用CSS渐变,您可以轻松调整线条粗细,如下所示:

strike {
    text-decoration: none;
    background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}

请参阅此处的演示和完整供应商前缀:http://codepen.io/pearlchen/pen/dhpxu

Answer 3

简短的回答:没有.它取决于字体,下划线的厚度是相同的 - 它随着文本的厚度而变化

Answer 4

不。

但是，如果删除线颜色与文本颜色相同，您可以轻松地在背景中使用自定义图像。

如果您需要不同的颜色，那么覆盖自定义删除线图像是唯一的方法。