Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: sans-serif; background-color: #f0f0f0; } .slide-in-border { position: relative; font-size: 1.5rem; color: #333; text-decoration: none; padding-bottom: 5px; } .slide-in-border::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background-color: #007bff; transition: all 0.3s ease-in-out; } .slide-in-border:hover::after { left: 0; width: 100%; } /* Accessibility: Disable transition for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .slide-in-border::after { transition: none; } } </style> <a href="#" class="slide-in-border">Hover Over Me</a>
