Eu usaria uma div container com flexbox e aplicaria flex-grow: 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-grow: 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>