Dica de Código: Conheça a propriedade CSS text-decoration

No desenvolvimento Front-end, muitas vezes utilizamos o CSS (Cascading Style Sheets) para estilizar nossas páginas da web, mas nem sempre exploramos todas as possibilidades que as propriedades CSS têm a oferecer. Uma dessas propriedades subestimadas é a text-decoration. Normalmente, a utilizamos apenas para remover o sublinhado de links ou para aplicar um efeito decorativo a textos não vinculados. Entretanto, nesta dica de código, vamos descobrir que essa propriedade pode oferecer muito mais do que isso.

Se você deseja aprofundar seus conhecimentos em CSS e suas propriedades, temos cursos completos disponíveis em nossa plataforma, incluindo o curso “HTML5 + CSS3 - Propriedades e Seletores Avançados“. Nesse curso, abordamos elementos avançados do uso do CSS em projetos, o que pode melhorar significativamente a qualidade de nossos códigos.

Agora, vamos mergulhar no poder da propriedade text-decoration e explorar suas diferentes possibilidades.

Conhecendo as Opções de Posicionamento

Curso HTML5 + CSS3 - Fundamentos

Conhecer o curso

A propriedade text-decoration pode criar diversos efeitos visuais em textos, como linhas em diferentes posições. Vejamos algumas opções:

/* Cria uma linha embaixo do texto */
.texto {
    text-decoration: underline;
}

/* Cria uma linha a cima do texto */
.texto {
    text-decoration: overline;
}

/* Cria uma linha no meio do texto */
.texto {
    text-decoration: line-through;
}

/* Podemos também fazer duas estilizações ao mesmo tempo, dessa forma: */
.texto {
    text-decoration: line-through underline;
}

Explorando Diferentes Estilos de Linha

Curso HTML5 + CSS3 - Apresentação de Dados

Conhecer o curso

Além de escolher a posição da linha, podemos definir diferentes estilos para ela. Vamos ver as opções disponíveis:

/* Cria a linha sólida. Obs esse é o comportamento padrão */
.texto {
    text-decoration-style: solid;
}

/* Cria a linha em formato de onda */
.texto {
    text-decoration-style: wavy;
}

/* Cria uma linha dupla */
.texto {
    text-decoration-style: double;
}

/* Cria a linha pontilhada */
.texto {
    text-decoration-style: dotted;
}

/* Cria a linha tracejada */
.texto {
    text-decoration-style: dashed;
}

Customizando a Linha do Texto

Curso HTML5 + CSS3 - Formulários

Conhecer o curso

Para adicionar um toque ainda mais personalizado às nossas linhas de texto, podemos alterar sua cor, espessura e distância em relação ao texto.

/* Com essa propriedade podemos alterar a cor da linha */
.texto  {
    text-decoration-color: red;
}

/* Essa propriedade altera a espessura da linha */
.texto {
    text-decoration-thickness: 50%;
}

/* Já para o espaçamento usamos a seguinte propriedade */
.texto {
    text-underline-offset: 7px;
}

Conclusão

A propriedade text-decoration no CSS oferece uma variedade impressionante de estilos para personalizar as linhas em nossos textos. Agora que você conhece todas essas possibilidades, pode adicionar um toque criativo aos seus projetos Front-end. Experimente diferentes combinações e estilos para encontrar o que mais se adequa ao seu design.

Lembre-se de que a prática constante e a exploração de novas funcionalidades são fundamentais para o crescimento como desenvolvedor Front-end. E se quiser se aprofundar ainda mais nesse universo, não deixe de conferir nossos cursos completos sobre CSS e outras tecnologias relacionadas.

Esperamos que esta dica de código tenha sido útil e que você possa aplicá-la em seus projetos futuros. Até a próxima!