This CSS snippet adds a smooth slide-in underline animation to links inside the Elementor Text Editor widget. The underline expands from left to right on hover, creating a clean and modern interaction effect. The animation automatically excludes Elementor buttons and standard button classes to avoid styling conflicts. This snippet can be customized further by changing the underline color, thickness, and animation speed.
/* === Reliable Animated Underline for Inline Paragraph Links === */
.elementor-widget-text-editor p a:not(.elementor-button):not(.elementor-button-link):not(.btn):not(.button) {
position: relative;
color: currentColor;
text-decoration: none;
display: inline-block;
transition: color 0.3s ease;
}
.elementor-widget-text-editor p a:not(.elementor-button):not(.elementor-button-link):not(.btn):not(.button)::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.elementor-widget-text-editor p a:hover:not(.elementor-button):not(.elementor-button-link):not(.btn):not(.button) {
color: inherit; /* Changes to surrounding text color */
}
.elementor-widget-text-editor p a:hover:not(.elementor-button):not(.elementor-button-link):not(.btn):not(.button)::after {
transform: scaleX(1);
}
