Underline
No library Beginner
Minimal borderless input — a colored line draws from left to right under the field on focus. Pure CSS transform, no dependencies.
Minimal borderless input — a colored line draws from left to right under the field on focus. Pure CSS transform, no dependencies.
Goal: Create an "Underline" input animation.
Visual behavior: A minimal input with no visible box border — only a subtle bottom border line at rest. On focus, an accent-colored bar draws from left to right across the bottom of the field using a scaleX transform. On blur it retracts.
Technique:
- Input: border: none, border-bottom only for the static track line
- A sibling <span> absolutely positioned at the bottom: height 2px, full width, accent background
- scaleX: 0 → 1 on focus, origin-left; transition ~250ms ease
- Wrapper div: position relative to anchor the span
Accessibility: Ensure there is a visible static bottom border at rest so the field boundary is always apparent. Under prefers-reduced-motion, remove the scaleX transition (motion-reduce:transition-none).
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.