Полоска от заголовка уезжает за пределы окна

Question

Есть такой незамысловатый код:

h1 {
  margin: 0;
  position: relative;
  text-align: center;
}

h1::after {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  background-color: #000;
  margin-left: 1%;
}

<body>
<h1>text<br>text</h1>
</body>

Слева полоса отображается нормально (::before), но справа (::after) он уезжает далеко за пределы окна. Подскажите пожалуйста, как исправить, чтобы под размер окна растягивался.

Answer 1

Решил ограничивающим контейнером

.container {
  width: 1372px;
  margin: 0 auto;
}

h1 {
  position: relative;
  text-align-center
}

h1::after {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  background-color: #000;
  margin-left: 1%;
}

<body>
  <div class="container">
<h1>text<br>text</h1></div>
</body>

БЛОГ НА HUSL

Полоска от заголовка уезжает за пределы окна

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