Como riscar uma palavra com CSS
Neste artigo veremos como riscar uma palavra com CSS, o que é considerado uma boa prática pois é feito de forma nativa, utilizando uma função própria da linguagem.
Conteúdo também disponível em vídeo
Fala Programador(a), beleza?
Vamos aprender uma técnica, que é considerada bem simples, mas com certeza vale o conhecimento
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
As vezes, por causa de layout/design, precisamos riscar uma palavra da nossa página web ou até mesmo um texto, e podemos fazer isso com CSS
Vamos utilizar este HTML:
<!DOCTYPE html>
<html>
<head>
<title>Como riscar uma palavra com CSS</title>
</head>
<body>
<p>Este text deve ser riscado.</p>
</body>
</html>Que representa isto no navegador:
E agora vamos adicionar o CSS necessário para riscar o texto, o nosso objetivo com este artigo
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Técnica para riscar texto com CSS:
E para realizar este efeito, vamos utilizar a propriedade text-decoration com o valor line-through
Veja como fica no código:
p {
text-decoration: line-through;
}
Que apresenta o seguinte resultado no browser:
E assim atingimos nosso objetivo!
Veja que com a propriedade text-decoration podemos fazer muito mais, do que apenas riscar o texto
Como por exemplo: deixar em negrito ou itálico!
E claro, é muito mais vantagem utilizar as opções nativas de uma linguagem, seja em HTML, CSS, JavaScript ou a linguagem que você estiver trabalhando no momento
Pois deixará seu código mais rápido para ser exibido e também seguindo boas práticas
Conclusão
Neste artigo vimos como riscar uma palavra com CSS, que é uma boa prática
Utilizamos a propriedade text-decoration com o valor line-through
E por hoje é isso, até o próximo post! 🙂
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
ChatGPT: o que é, como usar, dicas e como acessar login
ChatGPT é uma ferramenta de processamento de linguagem natural (NLP) baseada na arquitetura GPT-3.5, desenvolvida pela OpenAI. Sua criação representa um marco significativo no campo […]
Obrigado pela partilha!
de nada Matheus!
Obrigado!