Dica de Código: Conheça a propriedade CSS text-decoration \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 32 Min 18 Seg Tempo restante da oferta: 07 32 18 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Dica de Código: Conheça a propriedade CSS text-decoration [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ Dica de código ](https://www.treinaweb.com.br/blog/categoria/dica-de-codigo) # Dica de Código: Conheça a propriedade CSS text-decoration Descubra o poder da propriedade CSS text-decoration: estilos únicos para seus textos front-end! Explore posições, estilos e personalizações! [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-HTML-CSS.jpg) No desenvolvimento Front-end, muitas vezes utilizamos o [CSS (Cascading Style Sheets)](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) 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“](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados). 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 [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) A propriedade `text-decoration` pode criar diversos efeitos visuais em textos, como linhas em diferentes posições. Vejamos algumas opções: ```css /* 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 [ ![HTML5 + CSS3 - Apresentação de Dados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Apresentação de Dados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados) Além de escolher a posição da linha, podemos definir diferentes estilos para ela. Vamos ver as opções disponíveis: ```css /* 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 [ ![HTML5 + CSS3 - Formulários](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Formulários Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-formularios) 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. ```css /* 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! [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #frontend ](https://www.treinaweb.com.br/blog/tag/frontend) - [ #dica de código ](https://www.treinaweb.com.br/blog/tag/dica-de-codigo) - [ #dica de código html e css ](https://www.treinaweb.com.br/blog/tag/dica-de-codigo-html-e-css) - [ #webdevelopment ](https://www.treinaweb.com.br/blog/tag/webdevelopment) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075048/Font-Awesome-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Dominando o Font Awesome ](https://www.treinaweb.com.br/blog/css-dominando-o-font-awesome) Aprenda como utilizar todo o potencial do Font Awesome para facilitar o uso de ícones em suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) 4 anos atrás ## [ Boas práticas para o React ](https://www.treinaweb.com.br/blog/boas-praticas-para-o-react) Veja neste artigo algumas das dicas e boas práticas para utilizar em uma aplicação React e tenha um código mais limpo na sua aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/instalacao-do-vs-code-no-windows-linux-e-macos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - O que é e por que você deve usar? ](https://www.treinaweb.com.br/blog/vs-code-o-que-e-e-por-que-voce-deve-usar) O VS Code é um dos editores de código mais utilizados no mundo. Conheça melhor essa ferramenta e entenda o motivo de sua popularidade. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/wordpress-background-1-400x280.jpg) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 10 anos atrás ## [ Conheça o tipo de plugin Must-use do WordPress ](https://www.treinaweb.com.br/blog/conheca-o-tipo-de-plugin-must-use-do-wordpress) No tipo mu-plugin do WordPress os plugins ficam sempre ativos e devem ser usados para funções essenciais do projeto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Trabalhando com data no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-data-no-javascript) Neste artigo veremos como manipular datas no JavaScript, utilizando a classe Date, como pegar a data atual e utilizar os métodos da classe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/08160607/capa-freelancer-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Como ser um profissional freelancer de desenvolvimento: dicas essenciais ](https://www.treinaweb.com.br/blog/como-ser-um-profissional-freelancer-de-desenvolvimento-dicas-essenciais) Veja neste artigo algumas dicas essenciais para quem está pensando em dar os primeiros passos em sua carreira profissional como freelancer. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/16144257/conheca-o-google-cloud-platform-400x280.png) [ Google Cloud Platform (GCP) ](https://www.treinaweb.com.br/blog/categoria/google-cloud-platform-gcp) 9 anos atrás ## [ Conheça o Google Cloud Platform ](https://www.treinaweb.com.br/blog/conheca-o-google-cloud-platform) O Google Cloud Platform é o serviço de computação em nuvem do Google. Ele possui uma quantidade enorme de serviços para as mais diversas áreas. Veja seus principais conceitos e como testá-lo gratuitamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/algoritmos-400x280.jpg) [ Algoritmos ](https://www.treinaweb.com.br/blog/categoria/algoritmos) 10 anos atrás ## [ Conheça os principais algoritmos de ordenação ](https://www.treinaweb.com.br/blog/conheca-os-principais-algoritmos-de-ordenacao) A ordenação de registros consiste em organizar os dados em ordem crescente ou decrescente. Veja os principais métodos de ordenação e a teoria por trás deles. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/26164955/PRODUTIVIDADE-400x280.png) [ Estudos ](https://www.treinaweb.com.br/blog/categoria/estudos) 8 anos atrás ## [ Como aumentar sua produtividade nos estudos? ](https://www.treinaweb.com.br/blog/como-aumentar-sua-produtividade-nos-estudos) Você sente dificuldade em se concentrar quando está estudando? Então veja neste artigo dicas para melhorar seu foco. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/09/guia-termos-comuns-seguranca-400x280.png) [ Guias ](https://www.treinaweb.com.br/blog/categoria/guias) 3 anos atrás ## [ Guia de termos comuns de segurança ](https://www.treinaweb.com.br/blog/guia-de-termos-comuns-de-seguranca) Neste guia de segurança veremos alguns dos principais ataques que podem acontecer na web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/17103938/reuniao-de-orcamento-400x280.jpg) [ Vendas ](https://www.treinaweb.com.br/blog/categoria/vendas) 7 anos atrás ## [ Como fazer uma reunião de orçamento aumentar as chances do cliente fechar negócio ](https://www.treinaweb.com.br/blog/como-fazer-uma-reuniao-de-orcamento-aumentar-as-chances-do-cliente-fechar-negocio) A maioria dos freelancers e empresas cometem o erro de enviar um orçamento por email. Vou te ensinar a orçar do jeito certo pra fechar clientes. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **07h 32min 18s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58