logo标签列表

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

htmlcssstrikethrough
85
我正在使用CSS中的text-decoration: line-through，但是我似乎找不到任何方法来改变线条的粗细，而不需要使用像<hr>或图像叠加这样不优雅的解决方案。
有没有一种优雅的方法来指定删除线的粗细？
您可以查看透明删除线效果的文本，以实现文本的透明删除线效果。 - web-tiki
11个回答
-1

我在这里找不到适当的方法，所以我使用了带有 线性渐变 和 ex CSS 长度单位 的背景图片。

不幸的是，这意味着使用不同字体将会在稍微不同的位置上呈现删除线（例如，如果字体具有不同的 x 高度）。

.container {
  width: 300px;
}

.multiline-strikethrough {
  display: inline;
  background-image: linear-gradient(transparent 1.1ex, red 1.1ex, red 1.3ex, transparent 1.3ex);
}

.alt-1 {
  font-family: sans-serif;
  font-size: 2rem;
}

.alt-2 {
  font-family: sans-serif;
  font-size: 4rem;
  line-height 1;
}
<div class="container">
  <p class="multiline-strikethrough">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接