Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
10
respostas

:before não está funcionando

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

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?

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

Obrigada!

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?

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?

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;
}

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.

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;
}

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

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!

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

Obrigada!