How to use before in CSS?

Question

The image below shows my expected result. In fact, I would like every time I instantiate the tags H1, H2, H3 in html, to come up with this outline below the title. I was researching something similar to before, but I still haven’t generated any results. Thank you for your cooperation.

Answer 1

Young man follows an example. Use measures in % and in EM to be proportional without needing to make a size style for each H

Look how it turned out

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>

Answer 2

Using a neutral tag you get the result:

<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%;
}