DEV Community

Rafael Nunes
Rafael Nunes

Posted on

3 3

Olá mundo

Este é meu primeiro post, espero estar compartilhando aqui todos os dias algo novo.
O blog em sí já é algo novo para min vou deixar aqui soluções de problemas , hacksinhos e dicas relacionadas ao front end inicialmente.

Hoje vou mostrar como escrever olá mundo na tela com CSS, e quebrar a maldição de não ser um bom blogueiro .

No html vou deixar somente uma tagsinha de span para fazer essa brincadeira :

<span></span>
Enter fullscreen mode Exit fullscreen mode

A estrutura base do html é importante para que o navegador reconheça a tabela de caracteres, lingua e versão do html, mas para rodar na sua maquina local não tem problema colocar só o span.
Agora vamos ao CSS:

span::before{
  content:"Olá "
}
span::after{
  content:"mundo"
}
Enter fullscreen mode Exit fullscreen mode

Aqui nos temos pseudo elementos indicados por ::before ::after , um significa antes e o outro depois, ou seja, da nossa tag spam.
O content significa o conteudo, que nesse caso é um texto. Ao fazer a inserção do texto pelo css ele é inserido na folha de html e impresso no navegador, porêm não aparece no resultado das buscas dos navegadores, portanto não são semanticos, é bom ter isso em mente caso use essa tecnica para inserir texto 😉.

Ai está nosso olá mundo, e a maldição de ser um mal blogueiro está quebrada rs.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay