É 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>
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>
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>
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>
<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
<hr>
.<p>
possuir mais de uma linha?