Adds red pulsing dot as div pseudo-element

by Umair Rafiq

HTML

<h1 class="">Some text</h1>

CSS

.my-div {
  position: relative; /* Important for positioning the pseudo-element */
}

.my-div:before {
  content: "LIVE: ";
  padding-left:15px;
  color:red;
}
.my-div:after {
  content: "";
  color:red;
  position:absolute;
  top: 3px;
  left: 0px; /* Adjust as needed for position */
  width: 10px; /* Adjust as needed for dot size */
  height: 10px;
  border-radius: 50%; /* Makes it a circle */
  background-color: red; /* Choose your color */
  animation: color-transition 1.5s infinite; /* Sets the animation speed and loop */
}

@keyframes color-transition {
  0% {
    background-color: red;
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1); /* Initial size */
    opacity: 1;
  }
  50% {
    transform: scale(1.5); /* Max size */
    opacity: 0.8;
  }
  100% {
    transform: scale(1); /* Back to initial size */
    opacity: 1;
  }
}