如何更改CSS中的删除线/划线粗细？
如何更改CSS中的删除线/划线粗细？
提问于 2010-03-29 23:38:25
我正在使用CSS中的text-decoration: line-through，但我似乎找不到任何方法来改变线条粗细，而不使用<hr>或图像覆盖等不雅的技巧。
有没有什么优雅的方法来指定划线的粗细？
回答 8
Stack Overflow用户
发布于 2013-05-07 10:23:33
现代的解决方案是使用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>
甚至让三振出局成为一个梯度！只需使用结合了height的background，而不是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 (sans渐变)和up -甚至IE8，如果您使用单冒号:after语法并手动写入负的margin-top值，而不是使用calc()。
主要的缺点是，这只适用于一行文本。但是，嘿，你拿你能得到的;-)
Stack Overflow用户
发布于 2014-04-10 19:05:26
这似乎是一个长期存在的问题，对于多行删除没有理想的解决方案。
使用CSS渐变可以方便地调整线条粗细，如下所示：
strike {
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}请在此处查看演示和完整的供应商前缀：http://codepen.io/pearlchen/pen/dhpxu
Stack Overflow用户
发布于 2010-03-29 23:41:10
简短的回答是:不。这取决于字体，下划线的粗细也是一样的-它随文本的粗细而变化
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2539207
复制相关文章
相似问题
腾讯云开发者
