I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section. I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section.

Thank you.

Image of desired result

I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section. I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section.

Thank you.

Image of desired result

• css
• wordpress

• 1 There isn't enough detail in your question for us to give a reliable solution. Please show the relevant HTML/CSS (which you can find by using your browser's devtools inspect facility). – A Haworth Commented yesterday
• Please don't just repeat text to 'fill out' your question but use the extra space to give us more detail. You may like to read: stackoverflow/help/how-to-ask – A Haworth Commented yesterday

1 Answer 1

Add a border around the status value, then create an animation which sets border-color: transparent.

#status {
  font-family: sans-serif;
  background: silver;
  color: white;
  padding: 1em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

#status > span {
  border: 5px solid red;
  border-radius: 1em;
  padding: 0.5em 0.6em;
  animation: blink 1s step-start 0s infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

<div id="status">
  Shipment Status: <span>Pending</span>
</div>