Чтобы добавить линию под блоком, можно использовать псевдоэлемент ::after и свойства content, position, left, bottom, width, height, background-color. Смотрите пример:

HTML:

<div class="underline">Текст</div>

CSS:

.underline {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #6772e5;
}

Пояснение: блок .underline стилизуется с использованием свойств position, display, padding-bottom, font-size, font-weight, color. Свойство position: relative задает позиционирование относительно родительского блока. Свойство padding-bottom: 5px задает отступ снизу для блока, чтобы линия была ниже текста. Псевдоэлемент ::after добавляет линию под блоком и стилизуется с использованием свойств content, position: absolute, left: 0, bottom: 0, width: 100%, height: 2px, background-color. Свойство content: "" определяет содержимое псевдоэлемента. Свойство position: absolute позиционирует псевдоэлемент относительно родительского блока. Свойство left: 0 и bottom: 0 задают позицию псевдоэлемента снизу блока и от левого края. Свойство width: 100% задает ширину псевдоэлемента на всю ширину блока. Свойство height: 2px задает толщину линии. Свойство background-color задает цвет линии.

В результате будет создан блок с текстом, под которым будет линия в соответствии с указанными свойствами.