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.
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.
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」