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

Question

你能告诉我如何强制CSS使line-through财产比元素更广泛width吗？

例如

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

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

喜欢

Answer 1

你可以使用 哪种方式去寻找

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

演示

或者你可以做的是,使用:before和:after伪与content财产

演示

div {
    text-decoration:line-through;
}

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

注意:在这里使用常规选择器,请考虑使用class或者id特定地定位元素,如果您的文本在其他文本之间,请考虑将其包装在span中,而不是使用:before和:after覆盖span.

在这里使用CSS定位技术的解决方案简要回答,使用它您也可以通过它来控制打击的厚度.

在这里,我将子元素定位absolute到父元素.所以一定要position: relative;在父母身上申报.休息,:after伪处理剩下的,也确保你使用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;
}