Underlined text inside WordPress header button cannot be removed

Question

I was recently working on a WordPress project when I came across the underlined text in the picture below. It remains underlined until I hover over it, then the underline disappears.

Button BEFORE hovering over it

Button AFTER hovering over it

I tried to change basically all settings regarding both the general buttons look and the specific design of the one in the website header.

I'm using the latest version of WordPress running the latest version of the Astra theme.

This is the first time I have encountered this problem, although I've worked on many other websites before and it always worked as expected.

Any Ideas?

Answer 1

As it was kindly suggested by m4no I dug a bit in the Chrome Dev Tools and found the CSS that was causing the underlining:

a:where(:not(.wp-element-button)) {
   text-decoration: underline;
}

And changed it to

a:where(:not(.wp-element-button)) {
    text-decoration: none;
}

in the Additional CSS which solved the problem.

Answer 2

It can be disabled via theme.json

{
  "$schema": "http://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "styles": {
    "elements": {
      "link": {
        "typography": {
          "textDecoration": "false"
        }
      }
    }
  }
}

Note: I didn't come up with this solution, it was suggested by user straightvisions-matthias-bathke in another forum.