4

É possivel colocar o elemento <hr> à frente de um elemento <p>?

 hr{
   border-top: 1px solid red;
}
<p>Colocar a tag <b>hr</b> em frente do <b>p</b> </p><hr>

Já tentei utilizar display:inline em <p> e em <hr>

inserir a descrição da imagem aqui

4
  • 1
    Poderia descrever qual seria o resultado esperado? Se possível, adicione uma imagem ilustrando o que precisa. Aliás, no título há duas vezes a tag <hr>.
    – Woss
    Commented 19/12/2019 às 10:31
  • @woss coloquei, obrigado Commented 19/12/2019 às 10:39
  • 1
    Amadeu, o que deve acontecer se o <p> possuir mais de uma linha?
    – Woss
    Commented 19/12/2019 às 11:01
  • @Woss neste caso vai ser algo fixo Commented 19/12/2019 às 11:28

3 Respostas 3

7

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>

3

Eu usaria uma div container com flexbox e aplicaria flex: 1 no hr para ele ocupar a largura restante da div onde não está o texto. E um margin-left para dar um espaçamento. E em vez de borda, usaria height: 1px e o vermelho de cor de fundo. Precisa também retirar as bordas padrão do hr, para que ele fique como se fosse uma linha vermelha de 1 pixel de altura.

.paragrafo{
   display: flex;
   align-items: center;
}

.paragrafo hr{
   background: red;
   flex: 1;
   margin-left: 10px;
   height: 1px;
   border: none;
}
<div class="paragrafo">
   <p>Colocar a tag <b>hr</b> em frente do <b>p</b></p><hr>
</div>

1

 hr{
   margin-top:-25px;
   margin-left:213px;
   border-top: 1px solid red;
   }
<p>Colocar a tag <b>hr</b> em frente do <b>p</b> </p><hr>

5
  • 1
    qual o problema na resposta? Commented 19/12/2019 às 10:58
  • Para mim está certo é isso mesmo, mas seria interessante saber o porque a quem negativou Commented 19/12/2019 às 11:02
  • 3
    Bom, nem fui em que negativei, mas se ele trocar o <p> por <h1>, ou simplesmente trocar o tamanho da fonte. Ou mesmo se colocar uma palavra a mais na frase a sua resposta já não serve mais. Ela é praticamente insustentável, pois usa valares fixos, e qq alteração mesmo que um font-size já vai fazer ela deixar de funcionar... O usuário vai ter que fazer uma classe CSS para cada frase diferente que for usar. Pode até resolver o problema do autor, mas está longe de ser um forma indicada
    – hugocsl
    Commented 19/12/2019 às 11:09
  • Qual seria a forma mais correcta? Commented 19/12/2019 às 11:16
  • @AmadeuAntunes: Eu dei um up vote pois acredito que soluções de design estático também sejam válidas só não sejam as mais flexíveis em tempos de multi dispositivos. Mas a forma não mais correta, mas mais adequada seria manipular o layout de renderização com a propriedade CSS display Commented 21/12/2019 às 18:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .