Title with bottom border smaller than width

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:

Title with a bottom border smaller than is't width


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.