Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .element[data-status="active"]::before { content: "Active - "; color: green; } .element[data-status="inactive"]::before { content: "Inactive - "; color: red; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .blink::after { content: "⚠"; animation: blink 1s infinite; color: yellow; } </style> <body> <div class="element" data-status="active">This element is active.</div> <div class="element" data-status="inactive">This element is inactive.</div> <div class="blink">This element is blinking.</div> </body> </html>
console output