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. Agradeço a colaboração.
2 Respostas
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>
-
1
-
1@ThiagoCunha ficou bem legal né, boa sorte com o projeto! []´s– hugocslCommented 4/05/2018 às 19:09
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%;
}