html - 如何使用 CSS 使直通线比文本/元素更宽/更大

Question

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

例如

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

结果看起来像现在如何使线条比元素更宽更明显？

赞

Answer 1

你可以使用 ，这是一种很俗气的方式

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

Demo

---

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

Demo

div {
    text-decoration:line-through;
}

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

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

---

在此简要介绍使用 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;
}