CSS Animation Example: Slide-In Border

The "Slide-In Border" effect is a sophisticated, minimalist hover interaction often used for navigation links and subtle text highlighting.

Hover Over Me

Unlike complex keyframe animations, this effect is achieved simply by animating the width and left properties of a ::after pseudo-element using a transition. The pseudo-element starts with a width of 0 positioned at the center (left: 50%) and expands outward to the full width (width: 100%; left: 0) when hovered.

Here is the code to create the Slide-In Border animation.

View Output

Accessibility Considerations

As with all animations, it's a best practice to respect the user's system preferences regarding motion. You can use the prefers-reduced-motion media query to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Users generally set this preference via their operating system settings or a browser extension, and you can mimic this setting for testing purposes via your browser's Developer Tools.

Here we disable the smooth transition for users who have requested reduced motion.


@media (prefers-reduced-motion: reduce) {
    .slide-in-border::after {
        transition: none;
    }
}