---
title: "Underline — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Text. Get Depth Create eye-catching underline animations for any text in just a few clicks."
canonical: "https://framer.elliotli.dev/component/underline"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Underline

# Underline

Advance Underline Text - 12 Styles

[View on Framer](https://framer.com/marketplace/components/underline/?via=elliot-li)

![Underline preview image 1](https://framer.elliotli.dev/og/component/underline/d6044e562a59b80c/1600x1200.jpg)

## Summary

Get Depth Create eye-catching underline animations for any text in just a few clicks.

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

Create eye-catching underline animations for any text in just a few clicks. **Advance Underline Text** lets you choose from multiple underline styles, customize colors and thickness, and trigger the animation on hover or keep it always visible. Perfect for links, headings, CTAs, navigation, and highlighted copy.

**How to use**

Drop the component onto your page, enter your text, and customize everything from the properties panel. Choose when the underline appears, pick a style, adjust colors, stroke width, and animation duration—no code required.

**Features**

-   Multiple animated underline styles
    
-   Trigger on **Hover** or keep it **Always** visible
    
-   Customize text and underline colors independently
    
-   Adjustable underline thickness (stroke)
    
-   Fine-tune animation duration
    
-   Works with any font installed in your Framer project
    
-   Optional random underline variations for a more organic look
    
-   Optional link support for interactive text
    
-   Lightweight single code component with smooth animations
    

Designed to make links, buttons, headings, and highlighted text feel more polished while staying easy to customize.

**Refund Policy** Due to the nature of digital products, all sales are final. Once purchased, this template is non-refundable. Please make sure it fits your needs before completing the checkout. Support: [hi@alicorak.com](mailto:hi@alicorak.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6467

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-06-25
- **Updated**: 2026-08-16
- **Added**: 2026-06-25
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing