Title with bottom border smaller than width

css, css-shapes, html

Solution

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;
}

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.

Problem

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:

Original source