<br>
<br>
<br>
<br>
1, 2, 3, 4
<span class="test-circle">
  5
</span>
6, 7 ,8

.test-circle {
  position: relative;
  display: inline-block;
}


.test-circle::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  animation: notify-pulse 1.25s infinite ease-out;
  width: 50px;
  height: 50px;
  background-color: tomato;
  transform: translate(-50%, -50%);
  filter: blur(6px)
}

@keyframes notify-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  10%{
    opacity: 1;    
  }
  100% {
    opacity: 0;    
    transform: translate(-50%, -50%) scale(1);
  } 
}