Professional Animated List

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Professional Animated List</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <style>
 body {
 font-family: 'Arial', sans-serif;
 background: linear-gradient(135deg, #f0f0f0, #ffffff);
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 }
 .list-container {
 width: 60%;
 max-width: 600px;
 background: #fff;
 border-radius: 15px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 overflow: hidden;
 }
 .list-container ul {
 list-style: none;
 padding: 0;
 margin: 0;
 }
 .list-container li {
 display: flex;
 align-items: center;
 padding: 15px;
 border-bottom: 1px solid #f0f0f0;
 position: relative;
 transition: background 0.3s;
 }
 .list-container li:hover {
 background: #f9f9f9;
 }
 .list-container li:last-child {
 border-bottom: none;
 }
 .list-container .icon {
 margin-right: 15px;
 font-size: 24px;
 color: #6c757d;
 transition: transform 0.3s;
 }
 .list-container li:hover .icon {
 transform: rotate(20deg);
 }
 .list-container .text {
 flex: 1;
 font-size: 18px;
 color: #333;
 }
 .list-container .emoji {
 font-size: 24px;
 margin-left: 15px;
 transition: transform 0.3s;
 }
 .list-container li:hover .emoji {
 transform: scale(1.2);
 }
 .list-container li:after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 height: 3px;
 width: 0;
 background: linear-gradient(90deg, #ff6f61, #de6262);
 transition: width 0.3s;
 }
 .list-container li:hover:after {
 width: 100%;
 }
 .list-container li .badge {
 background: #ff6f61;
 color: #fff;
 border-radius: 20px;
 padding: 5px 10px;
 margin-left: 10px;
 font-size: 14px;
 animation: badgeAnimation 1.5s infinite;
 }
 @keyframes badgeAnimation {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.2); }
 }
 .list-container li .details {
 display: none;
 padding: 15px;
 background: #f7f7f7;
 border-top: 1px solid #e0e0e0;
 animation: slideDown 0.3s forwards;
 }
 @keyframes slideDown {
 from { height: 0; opacity: 0; }
 to { height: auto; opacity: 1; }
 }
 </style>
</head>
<body>
<div class="list-container">
 <ul>
 <li>
 
 List Item 1
 😊
 New
 </li>
 <li>
 
 List Item 2
 🌟
 Hot
 </li>
 <li>
 
 List Item 3
 ❤️
 Fav
 </li>
 <li>
 
 List Item 4
 😁
 Top
 </li>
 </ul>
</div>
<script>
 document.querySelectorAll('.list-container li').forEach(item => {
 item.addEventListener('click', () => {
 const details = item.querySelector('.details');
 if (details) {
 details.style.display = details.style.display === 'none' ? 'block' : 'none';
 }
 });
 });
</script>
</body>
</html>

Professional Animated List - MeggiTools