How to use before in CSS?

Navigation
2

The image below demonstrates my expected result. In fact, I would like every time I instantiate the tags h1, h2, h3 in html, come to toast this stroke under the title. I was researching something similar to before, but I still have not had any results. Thank you for your collaboration.

    
asked by anonymous 03.05.2018 / 20:20

2 answers

2

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

See how it went 

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>
    
03.05.2018 / 20:30
1

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%;
}
    
03.05.2018 / 20:34
Change input color according to value Keyboard arrows in QT