На этот вопрос уже есть ответ здесь:

Возможно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка H1:

h1 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px #d2202f solid;
}

Это дает тонкое красное подчеркивание ниже моих заголовков H1. Однако можно ли сделать так, чтобы подчеркивание составляло 50% текста в заголовке?