Como fazer um titulo ter um sublinhado, mas conseguir controlar o tamanho desse sublinhado.
1 Resposta
Opção 1
Aqui tem um exemplo usar um pseudo-elemento
ele é baseado em medidas em EM
e %
, assim quando vc mudar o tamanho da font REM
o elemento muda proporcionalmente.
Vc tb pode mudar esse valor manualmente caso queira. Deixei comentado no código
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%; /* posição da linha abaixo do texto relativa a altura do pai */
left: 0;
width: 40%; /* comprimento da linha relativa ao tamanho do texto */
height: 0.2em; /* altura da linha relativa ao valor da font do pai */
background-color: black;
}
h2::after {
height: 1px; /* altura fixa customizado */
}
h4::after {
width: 100px; /* comprimento fixo customizado */
}
h6::after {
background-color: red; /* cor customizada */
}
<h1>Meu H1</h1><br>
<h2>Meu H2</h2><br> <!-- exemplo com largura da linha fixa -->
<h3>Meu H3</h3><br>
<h4>Meu H4</h4><br> <!-- exemplo comprimento da linha fixo -->
<h5>Meu H5</h5><br>
<h6>Meu H6</h6><br> <!-- exemplo com cor diferente -->
Opção 2
Como é um pseudo-elemento
e ele aceita a propriedade content:""
, vc pode inclusive colocar uma imagem ali, ou então um caractere Unicode como nesse exemplo
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: "\279E"; /* caractere unicode */
position: absolute;
top: 110%;
left: 0;
margin: 0;
line-height: 0; /* valores de font */
font-size: 1.25em; /* valores de font */
color: green; /* valores de font */
}
h2::after{
content: url(http://www.placecage.com/16/16); /* img no content com url() */
position: absolute;
top: 110%;
left: 0;
margin: 0;
height: 16px; /* altura da imagem */
width: 16px; /* largura da imagem */
}
h6::after{
color: red; /* cor da fonte "seta", essa valor normalmente é herdado do pai, mas vc pode sobrescreve-lo aqui */
}
<h1>Meu H1</h1><br>
<h2>Meu H2</h2><br> <!-- exemplo com imagem -->
<h3>Meu H3</h3><br>
<h4>Meu H4</h4><br>
<h5>Meu H5</h5><br>
<h6>Meu H6</h6><br> <!-- exemplo com color diferente -->
-
1