如何在CSS中更改删除线的粗细？

Question

我正在使用CSS中的text-decoration: line-through，但是我似乎找不到任何方法来改变线条的粗细，而不需要使用像<hr>或图像叠加这样不优雅的解决方案。

有没有一种优雅的方法来指定删除线的粗细？

- 1077

---

您可以查看透明删除线效果的文本，以实现文本的透明删除线效果。 - web-tiki

Answer 1

现代的解决方案是使用text-decoration-thickness属性。

text-decoration-thickness: 1px;

你可以使用text-decoration-color属性来改变颜色。

text-decoration-color: #ff0000aa;

对于旧版浏览器，您可以使用以下其中一种解决方法：

这里有一个纯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()。 主要缺点是只适用于单行文本。但是，无论如何，您都能获得所需的效果；-)

- daGUY

---

好的！但有没有办法让它适用于多行呢？谢谢！ - user2335065

@user2335065：嗯...将每行文本都包装在div中，然后使用.strikeout div :: after？ 当然，如果文本（和/或行的宽度）是动态的，则无法起作用... - daGUY

这个解决方案在单行文本上完美运作。 - Franz

对于IE8，如果我不使用calc()，margin-top应该填什么值？ - Jen

适用于我的情况，但我需要删除font-size: 4em; line-height: 1em;。 - HoldOffHunger

这个解决方案是否独立于文本字体大小的设置？不幸的是，text-decoration-thickness 对我的需求无效，因此我需要找到一个解决方法，在我的文本中有一条穿过线。 - TheDude

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

- pearlchen

---

不错的技巧，但最好使用相对单位来编写。类似于 background-image: linear-gradient(transparent 45%, #cc1f1f 45% 55%, transparent 55%);（默认情况下，单位是相对于元素高度的）。 - Tey'

伟大的解决方案。 - Hebe

显示删除元素下面的文本 - jjxtra

Answer 3

简短回答：不是的。这取决于字体，下划线的粗细与文本的粗细相同。

- knittl

Answer 4

如今这非常容易，使用以下CSS即可

text-decoration-thickness: 1px;

您可以根据需要调整厚度。

可以像这样更改颜色

text-decoration-color: red;

主流浏览器支持

- Gurpreet Singh

Answer 5

我发现了另一种多行文本的方法：

span {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position: center; 
}

http://output.jsbin.com/weqovenopi/1/

这种方法假设使用一个图像(宽度为1像素，高度为n像素)，并且不受字体大小的影响。

唯一的缺点是背景会被文字覆盖。

- Goodnickoff

Answer 6

我有一个想法，但需要为每个厚度级别添加一个额外的元素。

HTML

<span><strike>test test</strike></span><br />  
<span id="test"><strike>           </strike></span>

css

span {height:1em}
#test {position:relative;top:-1.3em}

顺便说一句，第二个 span 中的空格是特殊字符 - 您需要使用 alt+0160 或 alt+255。
当您试图将其精确定位时，可以在负上方使用像素单位。

---

还有另一种选择，涉及首先使用 text-decoration 然后使用样式 <strike> 或 <del> 并查看是否可以在不移动文本的情况下垂直微调它。

html

<span><strike>test test</strike></span>

CSS（层叠样式表）

span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}

这两者在这里都正常工作，但请记得使用过渡的文档类型，因为<strike>已被弃用。

- Knu

---

不要使用 strike，而是使用 text-decoration: line-through。 - Ariel

是的，我已经阅读了。我理解您的解决方案有两个级别的元素。但是，您应该将内部的 strike 更改为具有 CSS 的另一个 span。您是否必须使用 strike？ - Ariel

@ariel 如果你使用2个span，你将不得不使用类或ID来匹配它们。这只是更方便。 - Knu

所有浏览器都支持IE6及以上版本，现在已经没有人再针对IE6进行开发了。在我推荐这种方法之前，我进行了双重检查。 - Ariel

触摸 :) 但也许你应该更新答案，因为今天的人们仍然想要这样做。 - Ariel

Answer 7

我知道这篇文章有些年头了，但是可以使用嵌套的span标签来实现：

<span style="text-decoration: line-through; font-size: 2em;">
  <span style="font-size: 0.5em; vertical-align: middle;">
    Striked Text
  </span>
</span>

删除线取决于字体的大小，因此如果您将外部span加倍，则会使线条变厚两倍。然后，您需要将内部span减半。垂直对齐是必要的，否则线条太高，几乎看起来像是一条上划线。

实例：http://jsfiddle.net/moodleboy/deep3qw8/ 在Chrome / FF中运行，但不适用于Safari，IE10或Opera。 在Mac上的Chrome中工作，但在Windows上不工作。

- Paul

Answer 8

不行。

然而，如果删除线颜色与文本颜色相同，您可以轻松地使用自定义图像作为背景。

如果您需要不同的颜色，则叠加自定义删除线图像是唯一的选择。

- Matt

---

我发现这适用于不同的颜色：https://dev59.com/ZXNA5IYBdhLWcg3wEZaT唯一的障碍是厚度。我也找不到任何简单的解决方案...或许这不值得追求。 - 1077

Answer 9

线条的粗细由字体（字族、大小等）决定。CSS 中没有更改此项的规定http://www.w3.org/TR/REC-CSS1/#text-decoration

- Bradley Mountford

Answer 10

这并没有回答问题，但是它解决了使用脚本缺乏唯一删除线的问题。我不是一个纯粹主义者，但我认为这是一个跨浏览器的解决方案。

<html>
<script src="/js/jquery/jquery.js"></script>
<script>
function do_strike_out(idx)
{
  $(this).wrap("<span style='position:relative;left:0px;top:0px;'>").
    before( "<span style='margin-top:10px;border-top:1px solid #FF0000;"+
      "position:absolute;width:100%;left:0px;'></span>" ).
    wrap("<span style='position:relative;left:0px;top:0px;'>");
}
$(function(){
  $('.strike_out').each(do_strike_out);
});
</script>
<body>
A jquery hack to do colored strike-through <span class='strike_out'>STRIKE-OUT</span>, which, I realize does not answer your question, sorry, but may be of intest for others.
</body>
</html>

- underdog