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

前端之家收集整理的这篇文章主要介绍了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.

猜你在找的HTML相关文章