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

发布时间：2020-12-14 16:45:18 所属栏目：资源来源：网络整理

导读：我需要创建一个下划线效果,其底部边框小于h2标题的宽度.通常我不上传图片,但我认为这可能有助于进一步解释这个问题：解决方法你可以使用伪元素. (example) .pseudo_border { position:relative; display:inline-block;}.pseudo_border:after { content:'';

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!