Skip to main content
removeu 10 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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>

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>

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>

adicionou 11 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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;
}

.paragrafo{
   display: flex;
   align-items: center;
}
<div class="paragrafo">
   <p>Colocar a tag <b>hr</b> em frente do <b>p</b></p><hr>
</div>

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.

hr{
   background: red;
   flex-grow: 1;
   margin-left: 10px;
   height: 1px;
   border: none;
}

.paragrafo{
   display: flex;
   align-items: center;
}
<div class="paragrafo">
   <p>Colocar a tag <b>hr</b> em frente do <b>p</b></p><hr>
</div>

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>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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.

hr{
   background: red;
   flex-grow: 1;
   margin-left: 10px;
   height: 1px;
   border: none;
}

.paragrafo{
   display: flex;
   align-items: center;
}
<div class="paragrafo">
   <p>Colocar a tag <b>hr</b> em frente do <b>p</b></p><hr>
</div>