Question 165069 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can the underlined text in the WordPress header button be removed?

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 BEFORE hovering over it

Button AFTER 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search