我正在尝试为CSScontent: ""
属性提供高度和宽度(以画一条线),但是它不起作用。可以对它应用高度和宽度吗?还是有其他解决方案可以通过content: ""
财产来实现?
div:after {
content: '\00af';
width: 500px;
height: 100px;
display: block;
}
我正在努力实现;内容前后在整个宽度上的一行。
________like this_______
一种实现所需效果的可能方法是,通过添加一个带有a的伪元素(div:after
在这种情况下),border-bottom
然后将伪元素和span
包含文本的位置设置为,使其span
边框(白色或与相同)成为可能。背景颜色)与伪元素的边界重叠。在span
文字的中央对齐,从而给有前行的作用,并在其后,而实际上该行是有完整的div
,但只是文字下的部分由隐藏。
注意:我尚未回答原始问题,因为Tim和chipChocolate.py的答案已经涵盖了该问题。本质上,当使用content标记创建线时,需要将线视为文本,并使用font-*
属性来增加其大小。
div {
position: relative;
text-align: center;
width: 200px;
margin-bottom: 10px; /* just for demo */
}
.small{
font-size: 0.75em;
}
span {
display: inline-block;
padding: 0px 2px; /* the more the padding the more the space between text and line */
border-bottom: 2px solid white;
}
div:after {
border-bottom: 2px solid black;
width: 100%;
position: absolute;
content: '';
height: 100%;
left: 0px;
top: -2px;
z-index: -1;
}
<div>
<span>Text</span>
</div>
<div>
<span>Lengthy Text</span>
</div>
<div>
<span>Very Lengthy Text</span>
</div>
<div class="small">
<span>Smaller Font</span>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句