hallowebsite Link Underline Effects

Overview

hallowebsite Link Underline Effects gives your text and menu links a refined underline: a visible resting line that animates on hover, for example growing in, thickening, or turning into a highlighter stroke. You can switch it on globally for typical Kadence areas (content, row layouts, sidebar/footer, header and footer menus), or per block, menu item or link with a CSS class. A live preview on the settings page shows every change immediately.

Features

• Hover effects: grow from left, grow from right, from the centre, swipe through, thicken, highlighter (lower half), highlight (full height), or static.
• Resting line: none, subtle (semi-transparent), solid, dashed or dotted, with separate settings for menus.
• Line thickness, offset, colour, hover colour, text hover colour, font weight, speed and easing.
• Current-page marker for menus: off, current page only, or current page plus ancestors.
• Global areas tuned for Kadence: content text, Kadence row layouts, sidebar/footer text, header menu and footer menu.
• Classes to switch the effect on, change it or exclude elements, per area.
• Live preview of all effects and line styles in the backend.

Setup

1. Open Settings → Underline Grow.
2. Choose the areas where the effect applies globally.
3. Choose the effect, resting line, colours and timing, check the live preview, and save.

Classes

Class	Effect
underline-grow	Switches the effect on: on a block or container (all text links inside), on a menu item (only that item) or on a link.
ug-marker, ug-thicken, ug-grow-center …	Changes the hover effect for this area. All names are shown in the preview.
ug-line-solid, ug-line-dotted …	Changes the resting line for this area.
no-underline-grow	Excludes a link, block or menu item.

underline-grow ug-thicken ug-line-dotted

The ug- classes only modify the effect. They don't switch it on by themselves. Add classes under Block → Advanced → Additional CSS class(es). For menu items, enable CSS Classes in Appearance → Menus → Screen Options.

Colours with Kadence

.site-footer { --ug-color: var(--global-palette1); }

Kadence notes

• For the header menu, set the navigation style to Standard in the Customizer. Otherwise two effects overlap.
• If Kadence already underlines content links, set the link style to no underline.

Changed:
- Rebranding: neuer Name „hallowebsite Link Underline Effects“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/link-underline-effects/
- Keine funktionalen Änderungen.