Neon Glow Breadcrumb - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Glow Breadcrumb</title> <style> body { font-family: Arial, sans-serif; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #fff; } .breadcrumb { display: flex; list-style: none; padding: 10px 20px; background-color: #222; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .breadcrumb li { display: flex; align-items: center; position: relative; margin-right: 10px; color: #0f0; text-shadow: 0 0 5px #0f0; transition: color 0.3s, text-shadow 0.3s; } .breadcrumb li:not(:last-child):after { content: '>'; margin-left: 10px; color: #0f0; text-shadow: 0 0 5px #0f0; font-size: 14px; } .breadcrumb li a { text-decoration: none; color: #0f0; font-weight: bold; display: flex; align-items: center; } .breadcrumb li a .icon { margin-right: 5px; } .breadcrumb li:hover, .breadcrumb li a:hover { color: #ff0; text-shadow: 0 0 10px #ff0; } .breadcrumb li.active { color: #f00; text-shadow: 0 0 10px #f00; } </style> </head> <body> <ul class="breadcrumb"> <li><a href="#"><i class="icon">đ </i><span>Home</span></a></li> <li><a href="#"><i class="icon">đŽ</i><span>Games</span></a></li> <li><a href="#"><i class="icon">đšī¸</i><span>Arcade</span></a></li> <li class="active"><a href="#"><i class="icon">đž</i><span>Play</span></a></li> </ul> </body> </html>