3

Como fazer um titulo ter um sublinhado, mas conseguir controlar o tamanho desse sublinhado.

Segue um exemplo do pretendido: inserir a descrição da imagem aqui

2
  • Cara editei minha resposta e inclui outro exemplo, acho que pode te interessar tb
    – hugocsl
    Commented 14/12/2018 às 14:28
  • 1
    Sim eu vi, impecável, ajudou bastante Commented 14/12/2018 às 16:08

1 Resposta 1

6

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
  • 1
    Perfeito ajudou bastante :D Commented 14/12/2018 às 16:03

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 .