How to underline effect by controlling the underscore size

Question

How to make a title have an underscore, but manage to control the size of that underscore.

Follow an example of the intended:

Answer 1

Option 1

Here is an example use a pseudo-elemento it is based on measures in EM and %, so when you change font size REM the element changes proportionally.

Vc tb can change this value manually if you want. I left commented in the code

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

Option 2

How is a pseudo-elemento and he accepts the property content:"", you can even put an image there, or else a character Unicode as in this example

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