如何使用CSS，使得line-through比text / element更宽/更大 [英] How to make line-through wider/bigger than text/element using CSS

问题描述

您能否让我知道如何强制CSS让 line-through 属性比元素宽度？

Can you please let me know how I can force CSS to make the line-through property wider than element width?

例如

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

，结果如现在我怎么能使线宽比元素更明显？

and result looks like now how I can make the line wider than element to be more obvious?

喜欢

推荐答案

您可以使用& nbsp; / p>

You can use   which is a cheesy way to go for

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

演示

或者您可以使用：before 和：之后伪与内容属性

Or you can do is, use :before and :after pseudo with content property

演示

div {
    text-decoration:line-through;
}

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

注意：使用 在这里，请考虑使用 class 或 id 明确指定元素，在其他文本之间，考虑在一个跨度中使用：之前和：之后 over span 。

Note: Using a general selector here, consider using class or an id to target the element specifically, also, if your text is between other text, consider wrapping that in a span and than use :before and :after over span.

使用CSS定位技术的解决方案

Briefing an answer here with solution that uses CSS Positioning techniques, using which you can also control the thickness of the strike through..

这里，我将子元素 absolute 定位到父元素。因此，请确保在父级上声明 position：relative; 。 Rest，：after pseudo处理剩余部分，并确保您使用 content：; ，它是强制性的。

Here, am positioning the child element absolute to the parent element. So make sure you declare position: relative; on parent. Rest, :after pseudo handles the rest and also be sure that you use content: "";, though it's blank, it's mandatory.

演示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;
}

这篇关于如何使用CSS，使得line-through比text / element更宽/更大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！