Home › Forums › WoodMart support forum › Link underline animation but not everywhere

Link underline animation but not everywhere

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • October 10, 2025 at 4:08 pm #690150

    r.feis
    Participant

    Hi there,

    I targeted the links to get a link underline animation on hover but unfortunately it targets all the links on the whole site, als f.e.g the main menu and the brand carousel.

    Here is the code:

    a {
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
    }
    a:after {
    content: ”;
    display: block;
    margin: auto;
    height: 2px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
    }
    a:hover:after {
    width: 100%;
    background: #329C32;
    }

    How do I configure the css in order to exclude elemnts like main menu, or brand carousel, etc. or is there a place in the theme where I can configure this apart from the normal not animated underline under Styles & colors > Links in the menu?

    Many thanks,

    Regards,

    Robert

    October 11, 2025 at 7:54 am #690294

    Hung Pham
    Participant

    Hi r.feis,

    Thanks for reaching to us.

    To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

    Regards,
    Hung PD

    October 13, 2025 at 9:08 am #690512

    r.feis
    Participant

    Hi Hung,

    Here are the credentials to log in:

    Many thanks.

    Regards,

    Robert

    • This reply was modified 3 weeks, 1 day ago by Hung Pham.
    October 14, 2025 at 8:47 am #690726

    Hung Pham
    Participant

    Hi r.feis,

    Admin details are incorrect, please double check.

    Regards,
    Hung PD

    October 14, 2025 at 9:29 am #690746

    r.feis
    Participant

    Hi Hung,

    Sorry, for that…

    Here you go:

    Thank you.

    Regards,

    Robert

    • This reply was modified 3 weeks, 1 day ago by Hung Pham.
    October 14, 2025 at 1:38 pm #690820

    Hung Pham
    Participant

    Hi r.feis,

    Still not working, please double check. https://ibb.co/rP3H35S

    Regards,
    Hung PD

    October 14, 2025 at 2:57 pm #690847

    r.feis
    Participant

    Hi Hung,

    Sorry, my fault…

    The front password stays the same as mentioned in the previous post.

    Thanks!

    Regards,

    Robert

    • This reply was modified 3 weeks ago by Hung Pham.
    October 16, 2025 at 8:29 am #691126

    Hung Pham
    Participant

    Hi r.feis,

    It worked, thank you.

    I also updated your codes, please double check to understand the codes.

    Regards,
    Hung PD

    October 17, 2025 at 9:40 am #691443

    r.feis
    Participant

    Dear Hung,

    Thanks for the code and tzhe changings but I still have some issues. Please see screenshots.

    I think that due to the underline feature the arrow of the “top of page” button has also disappeared.

    Thanks.

    Attachments:
    You must be logged in to view attached files.
    October 17, 2025 at 11:47 am #691483

    Bogdan Donovan
    Keymaster

    Hello. Apologies for the inaccuracies in our previous responses.

    Following the analysis of the custom code you applied to all links without exception, we must conclude that it cannot be set globally for all links with the addition of certain exclusions. The WoodMart theme has too many interactive elements that utilize links, such as the header banner, background buttons, icon buttons, social buttons, product swatches, clickable images, and many others which cannot be enumerated and excluded from your custom code in a single list.

    Judging by the animation of your custom code, it is designed only for a specific type of single-line text links that have a special nested structure, and for objective reasons, it cannot be globally applied across the entire site simply by using the “a” tag.

    In order to attempt adapting it to your site, please explain in more detail how it should work and list the specific locations where you want to see it (e.g., blog post titles, product titles, links within blog post text, etc.). If the link content and structure permits, we will prepare custom code that will add this effect to the locations you have specified.

    Kind Regards

    October 17, 2025 at 2:07 pm #691521

    r.feis
    Participant

    Hi Bogdan,

    Thanks for your reply.

    Here is a list with all the links that should be transformed with the green underline:

    – all normal text links everywhere on the site
    – the footer links

    No underline for the following elements:

    – all images, thumbnails and logos everywhere on the site
    – blog titles
    – all links in the mega menu
    – the top of page arrow on the right bottom

    That should be it for now.

    Many thanks.

    Regards,

    Robert

    October 17, 2025 at 2:35 pm #691527

    r.feis
    Participant

    Hi,

    I forgot one point where the underline should not appear and this would be on all buttons.

    Thanks,

    Regards,

    Robert

    October 17, 2025 at 4:23 pm #691553

    Bogdan Donovan
    Keymaster

    Hi,

    We have modified your custom code so that it now works only within text block elements, list elements, and menu elements if they are located in the footer. Please check. If you wish to apply this link style to other places, let us know.

    Additionally, it’s important to emphasize that if you want to display this link design elsewhere, the links in those locations must meet certain criteria. For the styles to work, the links need to have a display: inline-block property, which may affect their positioning and not be suitable everywhere. Also, such links should not be long, as line breaks will cause only the bottom line to be underlined on hover.

    Kind Regards

    October 17, 2025 at 4:46 pm #691559

    r.feis
    Participant

    Hi Bogdan,

    Thanks for your good and fast work.

    I still have some inks to be underlined, please see screenshots.

    I mentionned before that I would’int like them in the submenu of the main menu but could you add them there too please.

    Many thanks.

    Kind regards,

    Robert

    Attachments:
    You must be logged in to view attached files.
    October 17, 2025 at 5:17 pm #691567

    Bogdan Donovan
    Keymaster

    Okay. Your custom code has been extended and now additionally includes links from the Categories widget, the Text Editor element, and the submenu of the Extra Menu List element.

    Kind Regards

    October 23, 2025 at 4:45 pm #692439

    la.xtemos.acc
    Participant

    Hello!

    Could you plz share the custom code for this feature? It might be useful to in some cases.
    Thank you

    October 23, 2025 at 5:34 pm #692448

    Bogdan Donovan
    Keymaster

    Hi @la.xtemos.acc

    Here is the final custom code used in this topic. If you encounter any problems with it, please create a separate discussion topic and provide a link to your website. 

    :is(.wd-text-block, .wd-list, .elementor-widget-text-editor, .mega-menu-list .sub-sub-menu) a {
    display: inline-block;
}

:is(.footer-widget .menu-item, .wd-text-block, .wd-list, .widget_categories, .elementor-widget-text-editor, .mega-menu-list .sub-sub-menu) a:after {
    content: ''";
    position: relative;
    bottom: -2px;
    display: block;
    margin-inline: auto;
    height: 2px;
    width: 0px;
    background: #329C32;
    transition: width .5s ease, background-color .5s ease;
}

:is(.footer-widget .menu-item, .wd-text-block, .wd-list, .widget_categories, .elementor-widget-text-editor, .mega-menu-list .sub-sub-menu) a:hover:after {
    width: 100%;
}

    Kind Regards

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Link underline animation but not everywhere’ is closed to new replies.