Sublinhado css

Sublinhado css

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.