p a { white-space: nowrap; display: inline-block; color: red; text-decoration: none; position: relative; }

.hicontainer span.hi { height: 20px; position: absolute; width: 5px; left: 50%; top: 0; content: ''; background-color: #ff4444;
box-shadow: 0 0 5px #ff2222, 0 0 10px #ff2222, 0 0 15px #ff2222, 0 0 20px #ff2222, 0 0 30px #ff2222, 0 0 40px #ee2c91; pointer-events: none; border: 1px solid #FFF; opacity: 0 }

span.hi-text { position: relative; color: #902b89; z-index: 10000; text-decoration: underline;}

.hicontainer { position: absolute;  top: calc(100% + 6px); left: 50%; margin: 0 0 0 -51px; width: 102px; height: 22px; pointer-events: none; opacity: 0; -webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; }

a .hicontainer span.hi0 { margin-left: -50px; width: 100px; background: #000; box-shadow: none; display: none  }
a .hicontainer span.hi1 { margin-left: -250px; width: 4px; z-index: 1000 }
a .hicontainer span.hi2 { margin-left: -250px; width: 8px; z-index: 2000 }
a .hicontainer span.hi3 { margin-left: -250px; width: 12px; z-index: 3000 }
a .hicontainer span.hi4 { margin-left: -250px; width: 15px; z-index: 4000 }
a .hicontainer span.hi5 { margin-left: -250px; width: 20px; z-index: 5000 }

.has-hover-event:hover span { color: #902b89; text-decoration: none; }
.has-hover-event:hover .hicontainer { opacity: 1 }

a:hover { text-decoration: none; }


.has-hover-event:hover span.hi1 {
	animation: move1 3s infinite;
	animation-timing-function: ease;
}
.has-hover-event:hover span.hi2 {
	animation: move2 3s infinite;
	animation-delay: .3s;
	animation-timing-function: ease;
}
.has-hover-event:hover span.hi3 {
	animation: move3 3s infinite;
	animation-delay: .6s;
	animation-timing-function: ease;
}
.has-hover-event:hover span.hi4 {
	animation: move4 3s infinite;
	animation-delay: .8s;
	animation-timing-function: ease;
}
.has-hover-event:hover span.hi5 {
	animation: move5 3s infinite;
	animation-delay: 1s;
	animation-timing-function: ease;
}


@keyframes move1 {
	0% {
		margin-left: -250px;
		opacity: 0
	}
	
	20% {
		margin-left: -50px;
		opacity: 1
	}
	
	80% {
		margin-left: -50px;
		opacity: 1
	}
	
	100% {
		margin-left: 250px;
		opacity: 0
	}
}

@keyframes move2 {
	0% {
		margin-left: -250px;
		opacity: 0
	}
	
	20% {
		margin-left: -36px;
		opacity: 1
	}
	
	80% {
		margin-left: -36px;
		opacity: 1
	}
	
	100% {
		margin-left: 250px;
		opacity: 0
	}
}

@keyframes move3 {
	0% {
		margin-left: -250px;
		opacity: 0
	}
	
	20% {
		margin-left: -18px;
		opacity: 1
	}
	
	80% {
		margin-left: -18px;
		opacity: 1
	}
	
	100% {
		margin-left: 250px;
		opacity: 0
	}
}

@keyframes move4 {
	0% {
		margin-left: -250px;
		opacity: 0
	}
	
	20% {
		margin-left: 4px;
		opacity: 1
	}
	
	80% {
		margin-left: 4px;
		opacity: 1
	}
	
	100% {
		margin-left: 250px;
		opacity: 0
	}
}

@keyframes move5 {
	0% {
		margin-left: -250px;
		opacity: 0
	}
	
	20% {
		margin-left: 29px;
		opacity: 1
	}
	
	80% {
		margin-left: 29px;
		opacity: 1
	}
	
	100% {
		margin-left: 250px;
		opacity: 0
	}
}