6

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

例如

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

结果看起来像在此处输入图像描述现在我如何使线条比元素更宽更明显？

喜欢在此处输入图像描述

4

2 回答 2

16

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

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

演示

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

演示

div {
    text-decoration:line-through;
}

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

注意：在此处使用通用选择器，请考虑使用classor anid来专门定位元素，此外，如果您的文本位于其他文本之间，请考虑将其包装在 span 中，而不是 use :beforeand :afterover span。

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

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

演示 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;
}
于 2014-02-01T06:50:26.653 回答
1 
padding: N px;
line-height: N px;

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

于 2014-02-01T07:13:28.043 回答