---
title: "How to Add Underline Overlay Effect on Text in Elementor?"
url: https://theplusaddons.com/docs/underline-overlay-effect-on-text-in-elementor/
date: 2024-05-15
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "Want a highlighter-style underline that grows over your text on hover? The Advance Underline Options of the Advanced Typography widget from The Plus Addons for Elementor add classic text underlines..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Unique-Underline-Text-Effects-in-Elementor_-1024x536.jpg
word_count: 369
---

# How to Add Underline Overlay Effect on Text in Elementor?

## 

- Advanced Typography de The Plus Addons for Elementor añade subrayados clásicos y siete estilos de superposición en Advance Underline Options.
- Overlay Style 1 empieza como una línea fina de 5 px y 10 px desde la parte inferior, y en hover crece hasta cubrir toda la altura del texto.
- The Plus Addons for Elementor Pro activa Advanced Typography; en la versión gratuita aparece con un icono de candado en el panel de Elementor.

Want a highlighter-style underline that grows over your text on hover?

The **Advance Underline Options** of the Advanced Typography widget from The Plus Addons for Elementor add classic text underlines and seven overlay styles.

*To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, [click here](https://theplusaddons.com/docs/advanced-typography/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.- **Widget to enable:** Advanced Typography, switched on under **The Plus Addons > Widgets**.

## Steps

- Add the Advanced Typography widget, keep **Select Option** on **Normal** and type your text.- Go to **Style > Advance Underline Options**.- Set **Underline Style** to **Overlay** (or **Classic** for a normal underline).- Pick an **Overlay Style**, from Style 1 to Style 7.- On the **Normal** and **Hover** tabs, set the **Line Height** and pick a color under **Background Type** and **Color**.

![The Advance Underline Options with Underline Style set to Overlay and Overlay Style 1, with the underline on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/advtypo-underline.webp)

![Setting up the Advance Underline Options of the Advanced Typography widget](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-advanced-underline-options.gif)

## Settings

| Setting | What it does |
| ------- | ------------ |
| Underline Style | None (default), Classic or Overlay |
| Overlay Style | Style 1 to Style 7 (Overlay only). Style 7 has no Normal/Hover settings |
| Bottom Offset | Distance of the line from the bottom (Overlay Style 1 only) |
| Line Height / Hover Line Height | Thickness of the overlay line, normally and on hover |
| Background Type / Color | Classic or gradient color of the overlay, normally and on hover |
| Underline Line | Classic: Underline, Overline or Line Through (also on hover as Classic Hover) |
| Underline Style (Classic) | Solid, Double, Dotted, Dashed or Wavy |
| Line Color | Classic line color, normally and on hover |

Overlay Style 1 with a light color, before hover:

![Large text with a light purple overlay line along the bottom, made with Overlay Style 1](https://theplusaddons.com/wp-content/uploads/2026/09/advtypo-result-underline.webp)

## How It Behaves

- The underline covers the whole text. You can't underline only part of it in Normal mode.- **Overlay Style 1** starts as a thin line (5 px, 10 px from the bottom) and grows to the full height of the text on hover. Without your own color it is red.- **Classic** uses CSS text decoration, for example an Underline with the Wavy style.- To underline only some words, use [Multiple mode](https://theplusaddons.com/docs/multiple-styles-on-a-text-in-elementor/): each item has its own Advance Underline Options.

![Demo of the overlay and classic underline styles](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-advanced-underline-options-demo.gif)

## Related Docs

- [Advanced Typography widget: settings overview](https://theplusaddons.com/docs/advanced-typography/)- [Create a text stroke outline](https://theplusaddons.com/docs/create-text-stroke-outline-in-elementor/)- [Create an image reveal effect on text](https://theplusaddons.com/docs/image-reveal-effect-on-text-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding the underline overlay effect on text in Elementor?**
A: The Advanced Typography widget needs The Plus Addons for Elementor Pro, and the free plugin only shows it with a lock icon in the Elementor panel. The widget also has to be switched on under The Plus Addons > Widgets. That matters because the underline overlay effect lives inside this widget, so if either Pro or the widget toggle is missing, the option will not be available.

**Q: How do I make text grow into a highlighter-style underline on hover?**
A: The effect comes from setting Underline Style to Overlay in the Advanced Typography widget, then choosing an Overlay Style from Style 1 to Style 7. On the Normal and Hover tabs, Line Height and Background Type / Color control how thick and how colored the overlay looks. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this inside Elementor without code.

**Q: Why is my underline overlay not showing on only part of a sentence?**
A: This effect covers the whole text in Normal mode, so it is not built for underlining just one word inside a single text item. If you need only some words underlined, use Multiple mode instead, because each item gets its own Advance Underline Options. That is the clean workaround when a single overlay would be too broad.

**Q: Which overlay style should I use for a simple underline animation?**
A: Overlay Style 1 is the most specific option on this page because it starts as a thin line, 5 px high and 10 px from the bottom, then grows to full text height on hover. It also uses red by default if you do not set your own color. That makes it useful when you want a clear hover reveal without extra styling noise.

**Q: What is the difference between Classic and Overlay underline styles?**
A: Classic uses CSS text decoration, so it behaves like a normal underline and can also use Overline or Line Through. It supports Solid, Double, Dotted, Dashed, and Wavy styles. Overlay is different because it creates a fill-like highlight effect across the text instead of a standard text-decoration line.

**Q: Can I change the underline color and thickness separately for normal and hover states?**
A: The settings split those controls by state: Line Height / Hover Line Height changes thickness normally and on hover, while Background Type / Color sets the overlay color for both states. For Classic underlines, Line Color also has normal and hover values. That separation matters because hover effects look flat if both states use identical values.