Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

:before não está funcionando

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pseudoclasses e atividade Pseudoclasses

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Olá, tenho lista e em cada linha terá um triângulo de marcação, estava usando imagem, agora quero fazer com a pseudo classe. Mas não está aparecendo =/

está assim:

HTML

<ul class="list">
                                    <li class="list">See our customers as the starting point of everything we do </li>
                                    <li class="list">Work hard to meet and exceed our customers’ expectations </li>
                                    <li class="list">Provide our customers with the knowledge and confidence they need to make sound financial decisions </li>
                                    <li class="list">Give our employees the opportunity to develop themselves, and provide them with an inspiring and healthy work environment </li>
                                    <li class="list">Stand by our customers, and our colleagues, in their moments of truth </li>
                                </ul>

CSS

.bg-about>.list li:before{
    content:'';
    width:17px;
    height:17px;
    background-color:#f58c23;
    transform: rotate(45deg);
}
10 respostas
por Philippe Pilavjian Ehlert
| 343k xp | 652 posts
Desenvolvedor da Alura

Olá!

Acredito que ele não esteja aparecendo pois você não definiu um display pra ele. Tenta colocar um display: block no seletor do before e vê se funciona?

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Bom dia Philippe, era isso mesmo, eu estava testando aqui, aí coloquei um display:inline-block e funfou!

Obrigada!

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Só aproveitando essa dúvida, eu tenho uma outra div com esse triangulos, mas dentro do triângulo, vai uma numeração: 1, 2, 3... Tem como colocar texto dentro, e ainda mais um diferente para cada linha? teria que fazer uma classe :before para cada?

por Philippe Pilavjian Ehlert
| 343k xp | 652 posts
Desenvolvedor da Alura

hmm não sei se entendi a sua dúvida, vc coloca um exemplo de código pra ver se fica mais fácil de entender, por favor?

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Está assim hoje, com a imagem de um triângulo e um número dentro, e ao lado um texto:

<div class="col-xs-3 col-md-3">
    <img src="Images/li1.gif">
</div>

<div class=" col-xs-9 col-md-9">
    <div class="text-m">Your customer sees the option to pay over time with PinKube while shopping.</div>
</div>

Eu fiz aqui, mas o texto dentro da imagem também aparece rotacionado por causa do " transform: rotate(45deg);"

.bg-businesses2 .text-m:before{
    content:'1';
    width:50px;
    height:50px;
    background-color:#f58c23;
    transform: rotate(45deg);
    display:inline-block;
    margin-right:10px;
    padding:5px;
}
por Philippe Pilavjian Ehlert
| 343k xp | 652 posts
Desenvolvedor da Alura

hmm acho que entendi agora, o 1 dentro do before está rotacionando, certo?

acho que o melhor jeito de vc fazer isso seria colocando o 1 no texto mesmo e posicionando seu before em cima dele usando um position absolute nele.

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Certo, mas agora o que acontece é que o texto, fica por trás do elemento :before, coloquei z-index, mas não resolveu.

.bg-businesses2 .num:before {
    content: '';
    width: 50px;
    height: 50px;
    background-color: #f58c23;
    transform: rotate(45deg);
    display: inline-block;
    margin-right: 10px;
    padding: 5px;
    z-index: 1;
    position: absolute;
}

.num {
    font-size: 32px;
    font-weight: bold;
    z-index: 999;
}
por Philippe Pilavjian Ehlert
| 343k xp | 652 posts
Desenvolvedor da Alura

pra vc conseguir usar o z-index vc precisa colocar uma dessas posições:

position:absolute, position:relative, ou position:fixed

vc colocou no before, mas não colocou no num

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Não deu certo :( E também quando coloco absolute, não consigo alinhar direito um abaixo do outro. Acho que essa parte vou manter com imagem mesmo rs.

solução!
por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Consegui! :D na próxima aula tinha um exercício desse tipo e me ajudou!

Obrigada!