Как правильно реализовать линию?

Question

Всем привет, занимался практикой макета и наткнулся на одну новую проблемку для меня в виде линии на краю экрана возле заголовка:

И вот я не знаю как её правильно реализовать, через border-bottom, либо скачать её вставить либо же нужно, чтобы линия масштабировалась от размера экрана.

Вот ссылка на макет: https://www.figma.com/file/gBEwh0z9OcWrV6TGs8H2Ij/%D0%BF%D0%BE%D1%82%D1%80%D1%84%D0%BE%D0%BB%D0%B8%D0%BE-%D1%85%D1%83%D0%B4%D0%BE%D0%B6%D0%BD%D0%B8%D0%BA%D0%B0?node-id=27%3A53

Answer 1

Можно с помощью псевдоэлементов:

h1 {
  text-align: right;
}

h1::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 15%;
  height: 1px;
  background-color: black;
  margin-left: .5em;
}

<h1>Title</h1>

БЛОГ НА HUSL

Как правильно реализовать линию?

Ответы (1 шт):