Barra estilo sublinhado

[Artes Ussler 1]

Olá!

 

Como eu faço uma barrinha abaixo do texto como essa da imagem apenas usando CSS?

 

[Artes Ussler 1]

Olá

 

Depois de muita pesquisa e testes, consegui fazer o CSS do assunto em questão aqui:

 

<style type="text/css">
h1 {
	position:relative; font-family:"Open Sans"; display:block; color:#000; font-size:1.4em; font-weight:700; text-transform:uppercase; text-align:center
}
h1:after {
	position:absolute; bottom:-5px; left:0; right:0; margin:auto; width:60px; content:'.'; color:transparent; background:#f26522; height:3px
}
p {
	font-family:"Open Sans"; color:#999; font-size:0.9em;
}
</style>

<h1>TÍTULO</h1>
<p>Meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui.</p>

Se está correto? Não sei, mas funcionou, fez o que eu precisava.

Estou postando aqui para que outras pessoas, assim como eu, iniciante, estejam buscando ajuda neste sentido.

[Thalles Rangel 0]

use:

border-buttom: 3px solid #e67e22; 

e faça as devidas adaptações.