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?

Sidebar Image

Did not find a solution? We are here to help you succeed.

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

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?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

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

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

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

Download Free Astra Theme - Modal Popup Form