Para adicionar um estilo de sublinhado css é muito simples. No css existe uma função chamada de text-decoration onde podemos criar varias decorações no texto. Então utilizado o text-decoration: underline; podemos sublinhar o texto automaticamente, veja no exemplo abaixo a estilização de uma classe de uma tag qualquer, como <p class=”sublinadocss”>, <span class=”sublinadocss”>, <div class=”sublinadocss”> entre outras:
<style>
.sublinadocss{
text-decoration: underline;
}
</style>
Esse estilo é muito utilizado para criar classes de parágrafos, spans ou divs. Se o objetivo é sublinhar todos os parágrafos do post podemos criar o seguinte estilo css:
<style>
p{
text-decoration: underline;
}
</style>
Com o estilo a cima todos os parágrafos do texto, independente da classe ou id, serão sublinhado.
Podemos também sublinhar toda uma classe de parágrafos, como por exemplo:
<style>
p.sublicss{
text-decoration: underline;
}
</style>
<p>O parágrafo não será sublinhado</p>
<p class="sublicss">Tudo que escrever nos parágrafo com a class=sublicss será sublinhado</p>
O mesmo para um unico parágrafo com um id=, veja:
<style>
p#sublinhaid{
text-decoration: underline;
}
</style>
<p>O parágrafo não será sublinhado</p>
<p id="sublinhaid">Tudo que escrever neste parágrafo será sublinhado</p>
Para sublinhar apenas algumas palavras dentro de um paragrafo é adicionado spans no texto, veja o exemplo:
<style>
.palavrasubli{
text-decoration: underline;
}
</style>
<p>É muito fácil <span class="palavrasubli">sublinhar</span> uma única palavra.</p>
Vai ficar da segunda forma:
É muito fácil sublinhar uma única palavra.