Skip to main content
adicionou 12 caracteres ao conteúdo
Fonte Link

Vou deixar um exemplo que vai funcionar para todos os casos, com qqqualquer tamanho de frase (quantas palavras quiser), ou com qqqualquer font-size, ou mesmo em um <h1> ou <p>

Repare que eu coloque o p e o hr dentro de um container com display:flex, isso vai deixar os elementos lado a lado na horizontal, depois eu coloquei flex:1 no hr, isso vai fazer ele crescer e ocupar apenas o espaço restante da largura do container.

.meu-hr {
  display: flex;
  align-items: center;
}
.meu-hr hr {
  flex:1;
  border-color: red;
  margin-left: .5em;
}
<div class="meu-hr">
  <p>123</p><hr>
</div>

<div class="meu-hr">
  <h1>123456</h1><hr>
</div>

<div class="meu-hr">
  <p style="font-size:40px">123456789</p><hr>
</div>

Vou deixar um exemplo que vai funcionar para todos os casos, com qq tamanho de frase (quantas palavras quiser), ou com qq font-size, ou mesmo em um <h1> ou <p>

Repare que eu coloque o p e o hr dentro de um container com display:flex, isso vai deixar os elementos lado a lado na horizontal, depois eu coloquei flex:1 no hr, isso vai fazer ele crescer e ocupar apenas o espaço restante da largura do container.

.meu-hr {
  display: flex;
  align-items: center;
}
.meu-hr hr {
  flex:1;
  border-color: red;
  margin-left: .5em;
}
<div class="meu-hr">
  <p>123</p><hr>
</div>

<div class="meu-hr">
  <h1>123456</h1><hr>
</div>

<div class="meu-hr">
  <p style="font-size:40px">123456789</p><hr>
</div>

Vou deixar um exemplo que vai funcionar para todos os casos, com qualquer tamanho de frase (quantas palavras quiser), ou com qualquer font-size, ou mesmo em um <h1> ou <p>

Repare que eu coloque o p e o hr dentro de um container com display:flex, isso vai deixar os elementos lado a lado na horizontal, depois eu coloquei flex:1 no hr, isso vai fazer ele crescer e ocupar apenas o espaço restante da largura do container.

.meu-hr {
  display: flex;
  align-items: center;
}
.meu-hr hr {
  flex:1;
  border-color: red;
  margin-left: .5em;
}
<div class="meu-hr">
  <p>123</p><hr>
</div>

<div class="meu-hr">
  <h1>123456</h1><hr>
</div>

<div class="meu-hr">
  <p style="font-size:40px">123456789</p><hr>
</div>

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vou deixar um exemplo que vai funcionar para todos os casos, com qq tamanho de frase (quantas palavras quiser), ou com qq font-size, ou mesmo em um <h1> ou <p>

Repare que eu coloque o p e o hr dentro de um container com display:flex, isso vai deixar os elementos lado a lado na horizontal, depois eu coloquei flex:1 no hr, isso vai fazer ele crescer e ocupar apenas o espaço restante da largura do container.

.meu-hr {
  display: flex;
  align-items: center;
}
.meu-hr hr {
  flex:1;
  border-color: red;
  margin-left: .5em;
}
<div class="meu-hr">
  <p>123</p><hr>
</div>

<div class="meu-hr">
  <h1>123456</h1><hr>
</div>

<div class="meu-hr">
  <p style="font-size:40px">123456789</p><hr>
</div>