Title with bottom border smaller than width

Solution 1:

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.

Solution 2:

Other approach :

Box shadow with a negative spread radius :

body{text-align:center;}
h2{
  font-size:40px;
  color:#409FB3;
  display:inline-block;
  height:50px;
  box-shadow: 0 25px 0 -23px #5CC7A8;
}

<h2>Some title</h2>

Note : you need to make sure that - spread-radius x2 < height otherwise the box-shadow will have 0 height and disapear.