下边框小于宽度的标题 [英] Title with bottom border smaller than width

问题描述

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

I need to create an underline effect with a bottom border that is smaller than the h2 title's width. Usually I don't upload images but I figure it might help explaining the question a bit further:

推荐答案

这是一个伪元素。 （示例）

You could use a pseudo-element for this. (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％，并使用 left：0; right：0 和 margin 的 auto 相应地修改元素的高度/宽度，并更改 margin-top 作为间距。

Just absolutely position a pseudo-element relative to the parent element. Position it 100% from the top and use a combination of left:0; right:0 and a margin of auto for horizontal centering. Modify the height/width of the element accordingly and change the margin-top for the spacing.

这篇关于下边框小于宽度的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！