[英]How to make line-through wider/bigger than text/element using CSS
Can you please let me know how I can force CSS to make the line-through
property wider than element width
? 你能不能让我知道如何强制CSS使
line-through
属性比元素width
更宽?
For Example 例如
<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?
现在我怎么能让线条比元素更宽更明显?
Like 喜欢
You can use
你可以使用
which is a cheesy way to go for 这是一种俗气的方式
<div> HELLO </div>
Or you can do is, use :before
and :after
pseudo with content
property 或者你可以做的是,使用
:before
和:after
伪content
属性
div {
text-decoration:line-through;
}
div:before,
div:after {
content: "\00a0\00a0";
}
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
. 注意 :在这里使用常规选择器 ,请考虑使用
class
或id
来专门定位元素,如果文本在其他文本之间,请考虑将其包装在span中,而不是使用:before
和:after
over span
。
Briefing an answer here with solution that uses CSS Positioning techniques, using which you can also control the thickness of the strike through.. 在这里使用CSS定位技术的解决方案简要回答,使用它您也可以通过它来控制打击的厚度。
Here, am positioning the child element absolute
to the parent element. 在这里,我将child元素
absolute
定位到父元素。 So make sure you declare position: relative;
所以一定要声明
position: relative;
on parent. 在父母身上。 Rest,
:after
pseudo handles the rest and also be sure that you use content: "";
休息,
:after
伪:after
处理其余部分,并确保使用content: "";
, though it's blank, it's mandatory. 虽然它是空白的,但它是强制性的。
Demo 3 (Using CSS Positioning) 演示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;
}
padding: N px;
line-height: N px;
in html Nested Div's <div><div></div></div>
在html嵌套Div的
<div><div></div></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.