Как сделать такую линию?

Чтобы создать линию в CSS, можно воспользоваться несколькими методами:

1. Использование псевдоэлемента ::after или ::before:

.element::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}

Здесь создается пустой элемент перед .element и устанавливаются стили для создания линии. Можно задать ширину, высоту и цвет линии через CSS-свойства width, height и background-color соответственно.

2. Использование border:

.element {
  border-bottom: 1px solid #000;
}

Этот код создает линию под элементом .element путем задания нижней границы элемента через CSS-свойство border-bottom. Можно изменять толщину, стиль и цвет границы, используя свойства border-width, border-style и border-color соответственно.

3. Использование box-shadow:

.element {
  box-shadow: 0px 1px 0px 0px #000 inset;
}

В этом случае линия создается с помощью тени, установленной на элемент .element. Используя CSS-свойство box-shadow, можно задавать координаты, размытие и цвет тени, а также указывать, должна ли тень быть внутренней с помощью значения inset.

4. Использование linear-gradient:

.element {
  background-image: linear-gradient(to right, #000 0%, #000 100%);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

Этот код создает градиентную фоновую картинку с помощью CSS-свойства background-image. Линия имеет горизонтальное направление и черного цвета, указанные с помощью значения to right и #000 соответственно. Можно изменять ширину и цвет линии, изменяя значения свойств background-size и background-image.

Это лишь несколько методов создания линии в CSS. Все они имеют свои преимущества и могут быть использованы в разных ситуациях в зависимости от потребностей и требований проекта.