Skip to content

How to Add Underline Overlay Effect on Text in WordPress?

Updated On : September 27, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Advanced Typography block in Nexter Blocks Pro includes Classic and Overlay underline options, and Advanced Underline needs Nexter Blocks Pro.Block to enable Advanced Typography in Nexter > Blocks.
  • Overlay styles 1–7 use Bottom Offset, Line Height, and Background on Normal and Hover tabs, and they draw a highlight bar under or behind the text that can change on hover.
  • Multiple applies its own Advanced Underline to each text item, so it highlights a single word, while the overlay bar is red by default until Background is set.
Table of Contents

A custom underline or highlight draws attention to a key phrase in a heading.

The Advanced Typography block in Nexter Blocks Pro has classic and animated overlay underlines.

For every Advanced Typography setting in one place, see the Advanced Typography block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Pro — Advanced Underline needs Nexter Blocks Pro.
  • Block to enable: Advanced Typography, switched on under Nexter > Blocks in your WordPress dashboard.

Steps

  1. Add the Advanced Typography block, keep Normal and type your text in Content.
  1. On the Style tab, open Advanced Underline.
The Advanced Underline panel with Select Underline set to Overlay
  1. Under Select Underline, choose Classic or Overlay.
  1. For Overlay, pick an Overlay Style and set a Background colour on the Normal and Hover tabs. For Classic, set Line Type, Line Style and Line Color. Save.

Underline Types

TypeSettingsResult
ClassicLine Type (Underline, Overline, Line Through), Line Style (Solid, Double, Dotted, Dashed, Wavy), Line Color, for Normal and HoverA standard text decoration line
OverlayOverlay Style 1–7, Bottom Offset, Line Height, Background, for Normal and HoverA highlight bar drawn under or behind the text that can change on hover

How It Behaves

  • Overlay styles draw a separate bar, so they can be thicker than a normal underline and animate on hover.
  • With Multiple, each text item has its own Advanced Underline, so you can highlight a single word.

Limitations

  • The overlay bar is red by default. Set a Background colour to match your design.
  • The Advanced Underline panel on the Style tab is for Normal text; Multiple uses the per-item settings.

Troubleshooting

A red line appears under my text

That is the default overlay colour. Set Background on the Normal and Hover tabs.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding an underline overlay effect in WordPress?

Nexter Blocks Pro is the key requirement, because Advanced Underline is part of the Advanced Typography block. The block itself has to be enabled under Nexter > Blocks in your WordPress dashboard before the underline controls appear. That matters because the overlay effect is not a generic WordPress text option, it lives inside Nexter Blocks and is tied to the Advanced Typography block workflow.

Should I use Classic or Overlay underline for text emphasis?

Classic works like a standard text decoration line, while Overlay creates a highlight bar drawn under or behind the text. Overlay is the better pick when you want stronger visual emphasis or a hover change, because it can be thicker than a normal underline and animate on hover. Classic is cleaner when you only need a simple underline, overline, or line-through with specific line styles.

Why is a red line showing under my text instead of the underline style I wanted?

That red line is the default overlay colour. In Nexter Blocks Pro, the fix is to set a Background colour on both the Normal and Hover tabs so the bar matches your design instead of staying red. This usually comes up with Overlay styles, since they draw a separate bar rather than a standard text-decoration line.

Can I highlight just one word inside a heading with an underline overlay effect?

The Multiple option handles that use case well, because each text item gets its own Advanced Underline. That means you can highlight a single word instead of styling the whole heading. It is useful when you want one phrase to stand out without changing the rest of the text, especially in headings with mixed emphasis.

What are the main differences between Classic and Overlay underline types?

Classic uses Line Type, Line Style, and Line Color for Normal and Hover states, so it behaves like standard typography decoration. Overlay uses Overlay Style 1–7 plus Bottom Offset, Line Height, and Background for Normal and Hover, which makes it more like a highlight bar than an underline. The practical difference is control: Classic stays conventional, Overlay gives you more visual impact.

Where can I find more settings for Advanced Typography in Nexter Blocks?

The full set of controls lives in the Advanced Typography block guide, which covers every setting in one place. That is useful when you are combining underline effects with other text styling or need to compare options like Classic versus Overlay. Nexter Blocks also links to related docs such as Combine multiple styles on a text and Add a background text blend mode.

Last reviewed: September 27, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53