我需要创建一个下划线效果,其底部边框小于h2
标题的宽度。通常我不上传图片,但我认为这可能有助于进一步解释这个问题:
最佳答案
您可以为此使用伪元素。 (example)
.pseudo_border {
position:relative;
display:inline-block;
}
.pseudo_border:after {
content:'';
position:absolute;
left:0; right:0;
top:100%;
margin:10px auto;
width:50%;
height:6px;
background:#00f;
}
只是相对于父元素绝对定位一个伪元素。将它从 top
定位到 100%
并使用 left:0; 的组合; right:0
和 auto
的 margin
用于水平居中。相应地修改元素的高度/宽度,并更改 margin-top
的间距。
关于html - 底部边框小于宽度的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28650031/