Pseudo-elementos CSS ::before, ::after e outros - Curso de HTML e CSS - Aula 20

quando você tá trabalhando com elementos HTML é muito comum você precisar de alguma coisa antes do conteúdo daquele elemento por exemplo um botão às vezes você quer colocar um joinha antes do botão Ou você quer colocar uma setinha num item do menu que é muito comum você querer fazer isso no seu HTML uma maneira bem simples é você abrir o elemento e lá no conteúdo do elemento e por exemplo se você quiser colocar no finalzinho você coloca no final antes do fechamento da tag você coloca aquele elemento e também você pode colocar antes Se você

quiser fazer alguma coisa E aí Quem criou o CSS Já pensou nessa possibilidade e falou tá então vamos criar um seletor que chama de pseudo elemento ou seja um elemento que não existe na página mas a gente vai incluir esse elemento com o CSS e esses feudo elementos vão chamar Before e After então é sobre isso que a gente vai falar nessa aula por falar em aula você sabe que isso é HTML gratuito o link da playlist aqui no YouTube mesmo tá aí na descrição do vídeo Então vão ser várias aulas não é só essa

aula que você tá vendo Às vezes você vai ver um conteúdo continuando outro conteúdo é porque você perdeu a aula anterior você pode acessar também na descrição do vídeo ou no primeiro comentário você vai ver que eu vou deixar o link para a aula anterior e para aula posterior caso tenha uma aula posterior Então bora lá para esse vídeo Além também das seu doclasses que a gente viu algumas delas nas aulas anteriores A gente também tem pseu elementos e pseudo elementos são esse comportam de maneira bem similar aos seus classes porém nesse caso vai parecer

que você adicionou um elemento a mais na página para fazer o que você quer por exemplo põe aqui ó tem uma Vamos pensar assim ó Suponha que eu tenha uma ueli aqui no caso boa sei lá ter três 322 o caso aqui não dá né vou ter uma o l É pode ser uma ou l normal aqui no caso eu vou colocar vários livros aqui e eu tenho lá vários itens o que eu posso fazer por exemplo é colocar um elemento ou depois ou antes aqui no caso utilizando um pseudo elemento no caso por exemplo

Suponha que eu queira colocar depois do item aqui alguma coisa qualquer então para eu fazer essa seleção eu faço da seguinte maneira o l Li e aí eu quero colocar um pseudo elemento After Beleza então depois do elemento eu quero colocar alguma coisa aí sempre que eu utilizar um pseudo elemento eu vou colocar um contente o que que eu quero que apareça ali eu vou colocar um tracinho só para você ver então o que que aconteceu pareceu que eu adicionei alguma coisa aqui mas esse elemento aqui está assim não tá na página tá então ele

não não existe aqui na página então o que que eu tô fazendo eu tô criando um pseudo elemento entra inclusive você pode até Observar se a gente olhar aqui no Chrome que deixa eu tentar aumentar um pouquinho para você ver tentar descer Isso aqui e aí você vai ver que a gente tem aqui ó After Esse é o elemento que a gente adicionou que é esse elemento aqui E esse elemento vai ter um estilo próprio dele vai ter tudo bonitinho que os outros elementos têm aqui então se eu colocar por exemplo naquele elemento que eu

acabei de criar eu posso colocar um background da cor que eu quiser eu posso colocar todas as propriedades do CSS que eu quiser colocar um background Red color branco por exemplo o que eu quiser fazer com ele eu posso fazer display Block por exemplo o que eu quiser é um elemento novo eu posso colocar tanto After que foi no caso eu posso colocar também before beleza Ah uma coisa interessante também é geralmente seu doclasses a gente utiliza dois pontos e com pseudo é um elementos a gente utiliza dois pontos tá mas funciona um ponto também

pseudo elementos e pseudoclass Beleza então no caso aqui você pode ver muita gente até eu mesmo usando pseudo elementos também com um ponto que funciona normal acho que o navegador corrijas para a gente mas na documentação vai estar aqui pseudoclasses são com dois pontos Um só e pseudo elementos são com dois pontos dessa maneira aqui a gente pode até conferir isso aqui né pseu elementos estão vendo aqui ó pseudo elemento é aplicado estilo tal não fala aqui mas tá como exemplo aqui ó com dois dois pontos aqui é Beleza então a gente tem mais alguns

você é o do elementos que são por exemplo eu posso ter que esse aqui before A única diferença de Before e After é que o After é adicionado depois do elemento que você tá selecionando e quando quando a gente fala depois parece que é depois do elemento né mas aqui no caso eu tô selecionando o li tá vendo Então não é que é depois Doli é dentro do Lee mas depois do conteúdo aqui o before é antes do conteúdo tá vendo e o After vai vir depois do conteúdo aqui que seria só esse texto item

beleza isso aqui é muito utilizado você vai ver quanto isso aqui é utilizado quando a gente for criar alguma coisa porque às vezes a gente cria um elemento aí a gente fala por exemplo tô criando um menu quero colocar uma setinha no menu alguma coisa assim eu uso before After para fazer alguma coisa que eu quiser beleza além do Before e After a gente tem também eu vou falar dos mais usados aqui por exemplo e depois você pode ver na documentação que tem bastante também então vou colocar um lorem aqui e eu posso falar por

exemplo que a primeira letra aqui ó que foi o primeiro que a gente viu que Ah não aqui tá first Line mas tem força Claire também então eu quero que a primeira letra seja diferente ali naquele texto não P dois pontos fortes no caso aqui são dois é first E aí a primeira letra Vai ter por tempo Fontes sais enorme por exemplo 50 pixels Então a primeira letra Só no caso aqui vai ficar com fonte size maior do que os outros eu posso tentar colocar um display Block nessa letra no caso aqui e aí colocar

por exemplo um float left E aí fica tipo uma revista por exemplo posso colocar também uma margem aqui no caso de aqui ó a margem lembra que a gente falou que no sentido horário aqui a gente pode colocar topo eu não quero nada na direita uns 10 pixels embaixo uns 10 pixels e na esquerda aqui no caso nenhuma então aqui seria topo é direita embaixo e esquerda E aí eu tenho essa letra que ela fica bonitona né no caso posso colocar até uns 150 pixels aqui ó e colocar mais texto ali e fica como se

fosse aquelas revistas que a gente vê né Vamos colocar força elétrica bonitona Beleza deixa eu tirar o zoom para você ver aqui o meu texto tá bem pequeno deixar aumentar o texto do parágrafo colocar um p aqui onde sai de uns 24 pixels beleza aí fica assim mais ou menos aqui a gente pode pôr mais textos ali aí agora sim beleza não basicamente isso aqui que a gente que é um pseudo elemento aqui no caso da primeira letra aqui do parágrafo a gente tem também first Line que é a primeira linha inteira só que agora

como eu mexi ali no meu parágrafo deve vai ficar esquisito mas Além da Força letter a gente tentamore first line eu posso colocar um background só para você ver aqui a primeira letra aqui no caso ó vendo não a primeira linha do parágrafo foi foi configurado esse outro aqui foi a primeira letra e eu tenho também eu fiz uma seleção aqui acabei lembrando a gente tem também a seleção né selection então o que tiver selecionado vai ter esse estilo aqui Suponha que eu quero que seja selecionado tem a fonte de 50 pixel vai ficar esquisito

mas quando eu selecionar se eu conseguisse né no caso deixa eu tentar selecionar é não dá aqui no caso para mudar a fonte eu não consigo nem selecionar mais existe eu colocar um background aqui que fica melhor de você ver background é o azul já é normal vou colocar background Black para ficar bem visível e color White E aí o que que acontece é o seguinte o que eu seleciono fica com o fundo preto e a cor branca no caso aqui beleza a gente tem mais seu do elemento aqui ó que seria before After que

são os mais comuns a gente tem kill forceline porcelatter que a gente viu e seleção tem Spock Spot backup Place holder interessante o play holder esses outros aqui eu nem conheço para te falar a verdade os homens que eu conhecia foram os que eu te mostrei mas tenha um aqui que também eu conheço que é o Place holder é um Place holder aqui ele vai mexer com Place holder que você tiver utilizando por exemplo se eu tiver um input aqui ó do tipo text aqui então é eu tenho esse input eu tenho que tirar aquele

esses dois aqui no caso na verdade os três pode ser se eu tiver o input meu input tem um Place holder deixa eu dar um zoom aqui para você ver ó tem um Place holder aqui ó Olá esse Place holder aqui você pode manipular ele a partir do seletor Play holder inclusive você nem precisa passar um elemento se você quiser você pode selecionar só o Play stolder e falar que eu tenho que eu quero que ele tenha um fondue size diferente só para você ver alguma coisa ali na tela vou colocar um fonte size de

50 pixels tá vendo que o Play stolder quer assumiu ali vou colocar um color que é mais fácil de você ver red E aí a cor do Place holder fica vermelho não é bonito mas é muito interessante para você manipular o formulário quando você tiver usando se você quiser ser específico você pode pegar a classe do próprio input Class ou o nome do Pró da aqui né se você quiser mas classe forme Field por exemplo aqui eu tenho uma classe de Farm Field eu só vou mexer nesse input aqui nos outros não então vou tirar

esse desse aqui eu vou tirar a classe então para eu mexer só naquele input eu uso a classe com pseudo elemento por exemplo aí o de cima fica de um jeito debaixo de outro ali beleza aí fica a seu critério como você vai fazer essa seleção aí