Заголовок с нижней границей меньше ширины

Для этого можно использовать псевдоэлемент. (пример)

.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% от top и используйте комбинацию left:0; right:0 и margin из auto для горизонтального центрирования. Соответственно измените высоту/ширину элемента и измените margin-top для интервала.

Другой подход:

Тень коробки с отрицательным радиусом распространения:

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>

Примечание: необходимо убедиться, что - spread-radius x2 < height иначе тень блока будет иметь 0 высоты и исчезнет.

Вы также можете сделать это, используя linear-gradient. В этом методе небольшое фоновое изображение создается с использованием градиентов, так что оно прозрачно для первых и последних 25%, а остальные 50% имеют цвет (таким образом, оно выглядит так, как будто оно составляет 50% фактического h2 текста). Затем этот фон располагается внизу элемента, чтобы он выглядел как нижняя граница. Размер границы можно изменить, изменив размер фона.

Эффект сохранится, даже если количество текста в h2 будет разным. Однако основным недостатком является относительно плохая поддержка браузером градиентов по сравнению с псевдоэлементом или подходом box-shadow.

^{Примечание: скрипт в ответе используется только для того, чтобы избежать префиксов браузера :)}

h2{
  display: inline-block;
  text-align: center;
  padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
  background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%);
  background-size: 100% 5px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

.semitransparent{
  background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.25) 0%);
  background-size: 100% 5px, 100% 100%;
  background-position: 0% 100%, 0% -5px;
  background-repeat: no-repeat;  
}

.colored{
  background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, aliceblue 0%);
  background-size: 100% 5px, 100% 100%;
  background-position: 0% 100%, 0% -5px;
  background-repeat: no-repeat;  
}

/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  font-family: Calibri, Tahoma;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h2>Some Text</h2><br/>
<h2 class='semitransparent'>Some Lengthy Text</h2><br/>
<h2 class='colored'>Some more examples yay!!</h2>

Вы можете использовать своего рода «поддельную» рамку, просто обернув вокруг нее div и сделав div границы после заголовка.

JSFiddle

HTML

<div id="border-wrapper">
    <h2>My address</h2>
    <div id="border"></div>
</div>

CSS

#border-wrapper{
    position:relative;
    display:inline-block;
}
#border{
    position: relative;
    width: 50%;
    height: 2px;
    background-color: blue;
    margin: 0 auto;
}

Почти все решения, которые я видел для этого эффекта в прошлом, полагались на позиционирование, но с помощью display: flex мы можем добиться этого довольно легко. Ниже приведен пример заголовка, но его можно использовать для любого элемента. Просто имейте в виду, что природа flex-direction: column будет складывать любые дочерние элементы.

HTML

<h3 class="heading">Hey presto! We have an underline.</h3>

CSS

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.heading:after {
  content: '';
  border-bottom: 1px solid #ccc;
  padding-top: 10px;
  width: 50px;
}

Обратите внимание, что вам, возможно, придется добавить префиксы поставщиков для flex в зависимости от поддержки браузера (конечно, в основном предыдущих версий IE) https://caniuse.com/#search=flex