Textos sublinhado com CSS: Entenda a propriedade text-decoration

Indicação
Textos sublinhado com CSS: Entenda a propriedade text-decoration

O sublinhado com CSS é uma técnica amplamente utilizada para destacar palavras ou frases em um texto. Ele adiciona uma linha horizontal abaixo do conteúdo selecionado, chamando a atenção do leitor para aquele trecho específico. Neste artigo, vamos aprender como deixar textos sublinhado com CSS, além de fornecer dicas e exemplos para seu uso adequado.

Nesta postagem, iremos explorar um método utilizando somente CSS para realizar essa tarefa, se você não sabe o que é, recomendamos que acesse nosso tutorial sobre a tecnologia CSS.

Conteúdo

Como deixar texto sublinhado com CSS

Existem diferentes maneiras de aplicar sublinhado em CSS. Vamos explorar duas delas:

Método 1: Usando a propriedade ‘text-decoration’

O método mais comum para adicionar sublinhado em CSS é utilizando a propriedade text-decoration. Essa propriedade pode ser aplicada a qualquer elemento de texto e permite definir diferentes estilos, como sublinhado, sobrelinha, linha através do texto e até mesmo a remoção do sublinhado.

Exemplo de código:

				
					.seu-seletor {
  text-decoration: underline;
}

				
			

Método 2: Tag u para sublinhado

Em HTML, a tag <u> é utilizada para aplicar sublinhado em um texto. Aqui está um exemplo de como utilizá-la:

				
					<p>Este é um <u>texto sublinhado</u> em HTML.</p>

				
			

Nesse exemplo, a palavra “texto sublinhado” será exibida com uma linha horizontal abaixo dela, indicando o sublinhado. Vale ressaltar que o uso da tag <u> é considerado obsoleto em HTML5, e é recomendado o uso de CSS para estilizar o sublinhado, veja mais tags obsoletas que não devem ser ultilizadas no HTML5. No entanto, a tag <u> ainda pode ser suportada por alguns navegadores.

Quando usar textos sublinhado com CSS

Embora o sublinhado seja uma técnica amplamente utilizada, é importante usá-lo com moderação e de maneira adequada. Aqui estão algumas situações em que o sublinhado pode ser apropriado:

  • Destacar links: O sublinhado é comumente usado para indicar que um texto é um link clicável. Isso ajuda os usuários a identificarem rapidamente os elementos interativos em uma página.
  • Indicar ênfase: O sublinhado pode ser usado para enfatizar palavras ou frases importantes em um texto, destacando-as visualmente.
  • Delimitar nomes de categorias: Em casos de design de interface, o sublinhado pode ser utilizado para indicar a categorização de elementos, como guias de navegação ou filtros.

Dicas para a utilização de textos sublinhado com CSS

Ao utilizar sublinhado em seus textos, considere as seguintes dicas:

1. Destacar links

Ao adicionar sublinhado a links, certifique-se de que haja uma diferença visual clara entre links visitados e não visitados. Isso pode ser feito alterando a cor do sublinhado ou utilizando outros estilos, como alteração de cor de fundo ou mudança na aparência do link visitado.

2. Indicar ênfase

Evite utilizar o sublinhado em excesso para enfatizar múltiplos trechos de texto em uma mesma página. Isso pode levar a uma poluição visual e tornar o conteúdo confuso. Utilize o sublinhado com moderação, destacando apenas as informações mais relevantes.

3. Delimitar nomes de categorias

Ao utilizar sublinhado para delimitar nomes de categorias ou seções, certifique-se de que a escolha do sublinhado esteja alinhada com o restante do design do seu site ou aplicativo. O sublinhado deve ser consistente e intuitivo, facilitando a identificação e navegação do usuário.

Exemplos de aplicação de textos sublinhado com CSS

Aqui estão alguns exemplos práticos de como você pode aplicar sublinhado em CSS:

  1. Sublinhado básico:
				
					.seu-seletor {
  text-decoration: underline;
}

				
			
  1. Sublinhado com cor personalizada:
				
					.seu-seletor {
  text-decoration: underline;
  text-decoration-color: #ff0000; /* Sublinhado vermelho */
}

				
			
  1. Sublinhado ao passar o mouse (hover):
				
					.seu-seletor {
  text-decoration: none;
}

.seu-seletor:hover {
  text-decoration: underline;
}


				
			
  1. Sublinhado removido:
				
					.seu-seletor {
  text-decoration: none;
}

				
			

Conclusão

O sublinhado com CSS é uma técnica eficaz para destacar informações importantes em um texto. Utilizando as propriedades text-decoration ou criando classes personalizadas, é possível adicionar sublinhado de maneira simples e controlada. 

Lembre-se de utilizar o sublinhado com moderação e de acordo com as melhores práticas de design, garantindo uma experiência de usuário intuitiva e agradável. Experimente os exemplos fornecidos e explore outras possibilidades para aprimorar o visual dos seus textos.

Como se tornar um desenvolvedor Web?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação web.

Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.