2

A imagem abaixo demostra o meu resultado esperado. Na verdade, gostaria de toda vez que instanciar as tag h1, h2, h3 no html, vir de brinde esse traçado em baixo do título. Estava pesquisando algo semelhante ao before, mas ainda não gerei nenhum resultado. Resultado esperado Agradeço a colaboração.

2 Respostas 2

2

Jovem segue um exemplo. Use medidas em % e em EM para ficar proporcional sem precisar fazer um estilo de tamanho para cada H

Veja como ficou

h1, h2, h3, h4, h5, h6 {
  position: relative;
  display: inline-block;
  font-family: sans-serif;
}
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
  content: "";
  position: absolute;
  top: 110%;
  left: 0;
  width: 60%;
  height: 0.25em;
  background-color: orangered;
}
<h1>Meu H1</h1><br>
<h2>Meu H2</h2><br>
<h3>Meu H3</h3><br>
<h4>Meu H4</h4><br>
<h5>Meu H5</h5><br>
<h6>Meu H6</h6><br>

2
  • 1
    Obg! Funcionou! Commented 4/05/2018 às 19:00
  • 1
    @ThiagoCunha ficou bem legal né, boa sorte com o projeto! []´s
    – hugocsl
    Commented 4/05/2018 às 19:09
1

Usando uma tag neutra você consegue o resultado:

<h1>Titulo 1 <span></span></h1>
.h1{
    display: inline-block;
    position: relative;
    text-decoration: none;
}
.h1 span{
    border: 3px solid red;
    display: inline-block;
    position: absolute;
    top: 100%;
    width: 50%;
}

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 .