html – 底部边框小于宽度的标题

我需要创建一个下划线效果,其底部边框小于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;
}

只需相对于父元素绝对定位一个伪元素.将它从顶部100％定位并使用左边的组合：0;右：0和水平居中的自动余量.相应地修改元素的高度/宽度,并更改间距的margin-top.

原文地址：https://www.jb51.cc/html/226875.html