Animation in Before Overwriting Text

Question

Animation in Before Overwriting Text

Navigation

#1 by (1 votes)

-1

I'm trying to make an animation in the :: before of a paragraph every time I move the mouse

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

html css animate.css

asked by anonymous 16.04.2017 / 00:05

1 answer

How to do page transactions Passing Date Field Parameters

score 1 · Accepted Answer

You need 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 case what is absolute behind.

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