Unique Horizontal Rule

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unique Horizontal Rule</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        padding: 20px;
    }
    .custom-hr {
        position: relative;
        border: none;
        height: 2px;
        background: linear-gradient(to right, #ff7e5f, #feb47b);
        margin: 50px 0;
        overflow: visible;
    }
    .custom-hr::before, .custom-hr::after {
        content: '✨';
        position: absolute;
        top: -25px;
        font-size: 2em;
        animation: sparkle 2s infinite;
    }
    .custom-hr::before {
        left: 0;
        transform: translateX(-50%);
    }
    .custom-hr::after {
        right: 0;
        transform: translateX(50%);
    }
    @keyframes sparkle {
        0% { transform: scale(1) rotate(0); }
        50% { transform: scale(1.5) rotate(180deg); }
        100% { transform: scale(1) rotate(360deg); }
    }
    .custom-hr .icon {
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2em;
        animation: bounce 2s infinite;
    }
    @keyframes bounce {
        0%, 100% { transform: translateY(0) translateX(-50%); }
        50% { transform: translateY(-10px) translateX(-50%); }
    }
    .emoji-container {
        display: flex;
        justify-content: space-between;
        position: relative;
        top: -15px;
    }
    .emoji-container span {
        font-size: 1.5em;
        animation: float 3s infinite;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
</style>
</head>
<body>
<h1>Welcome to My Stylish Horizontal Rule</h1>
<p>Here is an example of a highly styled and attractive horizontal rule that you can use in your projects.</p>
<hr class="custom-hr">
<div class="emoji-container">
    <span>💡</span>
    <span>🚀</span>
    <span>🌟</span>
</div>
<script>
    document.querySelectorAll('.emoji-container span').forEach((emoji, index) => {
        emoji.style.animationDelay = `${index * 0.5}s`;
    });
</script>
</body>
</html>

Unique Horizontal Rule - MeggiTools