How To Remove Underlined Content Links

No results found. Try again with different words?

Search must be at least 3 characters.

    How To Remove Underlined Content Links on Buttons and Specifics Classes?

    Since the Astra Theme version 3.6.4, you can underline the links in your content using the “Underline Content Links” option. This is a useful option especially from the point of your website’s accessibility for visually impaired users. Yet, you might not need to have all of your links underlined.

    This document will help you remove underlined links on specific classes and buttons. 

    Why Is This Important?

    The Underline Content Links option allows you to accent all links on your website with just one click. You can find this option in the Customizer, under Global > Typography > Base Typography. Activating this option automatically adds underline text-decoration to your links.

    Underline Content Link option

    At the same time, some page builder buttons or anchors don’t have an option for overriding the text-decoration. This can interfere with your design and influence the user experience on parts of your website. 

    Issue with underlined content

    Thus, this document provides two codes that will help you remove the underline text-decoration on certain classes and buttons while keeping the “Underline Content Links” option active for the rest of your website.

    How To Change This?

    The two available codes will let you remove the underline setting for anchor links or remove it from just some specific elements.

    To do this, you need to add one of the following custom codes to the functions.php file of your Child Theme.

    If you don’t have your Child Theme installed, please check this article on how to do it. 

    If you are not sure how to add this code, please check this article.

    1. Code To Remove the Underline Settings for Following Custom Anchor Links:

    add_filter( 'astra_unset_builder_elements_underline', '__return_true' );

    2. Exclude Specific Anchor Links From Underline Settings:

    add_filter( 'astra_remove_underline_anchor_links', 'update_selectors_to_remove_underline', 10, 1 );
    
    function update_selectors_to_remove_underline( $selectors ) {
    
    $selectors = $selectors . ', a.my-first-anchor-tag, a.my-second-anchor-tag'; 
    
    //.my-first-anchor-tag is an example class assigned to anchor link - add your selectors in this manner.
    
    return $selectors;
    
    }

    You need to update the above code by replacing the example selectors with the ones from which you want to remove the text-decoration. 

    To create your selectors add “a.” in front of the class name you wish to exclude from the underline setting. For example, if your element’s class is “test”, the selector for these elements would be “a.test”

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

    Enter your email address and be the first to learn about updates and new features.