-2

Estou tentando fazer uma animação no ::before de um paragrafo toda vez que eu passar o mouse

Porém esse CSS está sobrescrevendo tudo que está escrito no paragrafo, mesmo sendo Before em vez de After.

	p::before{
    	width:200px;
        height:20px;
        position: absolute;
        content: "";
    }
	p:hover::before{
    	animation: blink 2s infinite alternate;
    }
    
    @keyframes blink {
        from {
            background-color: #89F0FF;
            box-shadow: 0 0 10px #89F0FF;
        }
        to {
            background-color: white;
            box-shadow: 0 0 10px #89F0FF;
        }
    }
<p>Passe o Mouse Aqui</p>

1 Resposta 1

1

Você precisa do z-index, no caso do absolute, ele geralmente toma a frente, então vc precisa especificar o texto como a frente dele, ou no caso o que está absolute para trás.

Você pode resolver da forma abaixo (com z-index: -1) para mandar para trás, ou adicionar um span dentro do p e colocar como position relative e z-index: 1.

p::before {
  width: 200px;
  height: 20px;
  position: absolute;
  content: "";
  z-index: -1;
}

p:hover::before {
  animation: blink 2s infinite alternate;
}

@keyframes blink {
  from {
    background-color: #89F0FF;
    box-shadow: 0 0 10px #89F0FF;
  }
  to {
    background-color: white;
    box-shadow: 0 0 10px #89F0FF;
  }
}
<p>Passe o Mouse Aqui</p>

1
  • Funcionou, Obrigado. Só adicionando um detalhe que se o <p> estiver encima de outra <div> com background, essa <div> deve ser z-index:0 e o <p> z-index:-1
    – Sveen
    Commented 16/04/2017 às 3:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .