如何使用 CSS 使 line-through 比 text/element 更宽/更大答案

【问题标题】：How to make line-through wider/bigger than text/element using CSS如何使用 CSS 使 line-through 比 text/element 更宽/更大
【发布时间】：2014-02-01 06:47:11
【问题描述】：

您能否告诉我如何强制 CSS 使 line-through 属性比元素 width 更宽？

举例

<h3 style="text-decoration:line-through">50</h3>

结果看起来像现在我怎样才能使线条比元素更宽更明显？

【问题讨论】：

罢工的宽度是文本的宽度（不是元素的宽度，它等于像h3这样的块元素的可用总宽度）。

标签： html css line-through

【解决方案1】：

您可以使用&nbsp;，这是一种俗气的方式

<div>&nbsp;&nbsp;HELLO&nbsp;&nbsp;</div>

Demo

或者你可以做的是，使用 :before 和 :after 伪 content 属性

Demo

div {
    text-decoration:line-through;
}

div:before,
div:after {
    content: "\00a0\00a0";
}

注意：在此处使用通用选择器，考虑使用class 或id 来专门定位元素，如果您的文本位于其他文本之间，考虑将其包装在一个跨度中，而不是使用 :before 和 :after 而不是 span。

在这里简要回答使用 CSS 定位技术的解决方案，您还可以使用它来控制删除线的厚度..

在这里，我将子元素absolute 定位到父元素。因此，请确保在父节点上声明 position: relative;。休息，:after 伪处理其余部分，并确保您使用 content: "";，虽然它是空白的，但它是强制性的。

Demo 3（使用 CSS 定位）

div {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    margin: 10px;
}

div:after {
    content: "";
    position: absolute;
    border: 2px solid #000;
    top: 50%;
    margin-top: -1px;
    width: 100%;
    left: -2px;
}

【讨论】：

【解决方案2】：

padding: N px;
line-height: N px;

&nbsp; 在 html 中嵌套 Div 的<div><div></div></div>

【讨论】：