Я уже отвечал, как сделать такую декоративную линию справа от текста, посмотрите там, как всё устроено.

Для отцентрированного текста мне не удалось найти надёжное решение в рамках одного тега — то Сафари сломается, то Эксплорер. Если добавить дополнительный span, получится так:

<style>
  h1 {
    position: relative;
    overflow: hidden;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
  }
  h1 > span {
    display: inline-block;
    margin: 0 .4em;
  }
  h1 > span:before,
  h1 > span:after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 2px solid #4e4e4e;
    margin-top: .6em;
  }
  h1 > span:before {
    margin-left: -102%;
  }
  h1 > span:after {
    margin-left: 2%;
  }
</style>

<h1><span>Рекомендуем</span></h1>