What it looks like
At rest the text looks ordinary. When the mouse enters, a thin line, one tenth of the font size thick, draws itself just below the letters. In the default style it starts in the middle and opens toward both ends in a quarter of a second, then retracts when the mouse leaves. The other two styles either slide the line in from one side and out the other, like a ruler passing under the word, or keep it visible and send it out one side and back in from the other. The color always matches the text, so it follows light and dark mode with no extra work.
You may be looking for this if you asked for something like
- a line that shows up under the link when I hover
- an underline that grows from the middle in my nav menu
- a hover effect where a line slides under the word
- make my footer links feel like an agency website
- that animated link underline you see on designer portfolios
- an underline that comes in from one side and leaves on the other
Also known as
- animated underline
- hover underline
- link underline animation
- underline hover effect
- sliding underline
When to use
- Main menu and footer links on company websites
- Contact and social media lists in portfolios
- Inline calls to action that need to look clickable
- Editorial sites with large, uppercase typography
When to avoid
- Apps used mostly on phones, where there is no hover
- Links inside paragraphs, which need a visible underline without hover to be recognized
How to ask your AI
Add an animated hover underline to the menu and footer links: the line grows from the center in the text color, also appears on keyboard focus and stays static for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Filete
Does Filete work on phones?
Filete reacts when the mouse enters the text, and touch screens have no hover, so on phones the animation cannot act as a cue. If the link must stand out there too, use the style that keeps the line visible at rest and only sends it out and back on hover. The THM Componentes prompt also asks for a mobile test.
Can I use Filete with keyboard navigation?
Filete animates when the mouse enters the text, not when the link receives focus with the Tab key. The link stays accessible, since the component is only a wrapper and the line is hidden from screen readers, but it is worth asking your AI to trigger the same animation on focus.
How do I change the underline color and thickness?
The line in Filete uses the current text color, so you only need to change the link color with your project tokens, as the THM Componentes prompt instructs. Thickness and distance from the letters are proportional to the font size and can be tuned through the ratio props.
