Is it possible to have the word “LIVE” animated on a post on my site animate. Like here: https://news.sky.com
Hello,
To have something like this, you need to create a custom code CSS.
.entry-title::before,
.td-module-title::before {
content: "Live ";
display: inline-block;
padding: 5px 10px;
background: linear-gradient(45deg, #ff0000, #ff4d4d);
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-radius: 20px;
margin-right: 10px;
animation: pulse 1.5s infinite;
vertical-align: middle;
}
/* Pulse animation */
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}
50% {
box-shadow: 0 0 20px rgba(255, 0, 0, 1);
}
}
/* Optional: Hover effect for title */
.entry-title:hover::before,
.td-module-title:hover::before {
background: linear-gradient(45deg, #cc0000, #ff0000);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
You need to add an extra class on the block where you want to have the icon and add it to the code.
Thank you!
Thank you
