Animation in Before overwriting text

Question

I’m trying to make an animation on the ::before of a paragraph every time I pass the mouse

But this CSS is overwriting everything written in the paragraph, even though it is Before instead of 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>

Answer 1

You need the z-index, in the case of Absolute, it usually takes the front, so you need to specify the text as the front of it, or in the case what is Absolute backwards.

You can sort the following way (with z-index: -1) to send back, or add a span inside the p and put as position relative and 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>