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

Question

我需要创建一个下划线效果，其底部边框小于h2 标题的宽度。通常我不上传图片，但我认为这可能有助于进一步解释这个问题:

Answer 1

您可以为此使用伪元素。 (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 的间距。