-1

I am building a site that uses both text hyperlinks, as well as CSS button ones. I am trying to configure the CSS so that the text links generate an underline when hovered, but not the buttons.

I have tried a number of configurations with the :not() and a classes like a:not(button):hover, a :not(button):hover, a:hover :not(button) and a:hover:not(button) but have only succeeded in making the buttons have underlines on hover and not the text with a button:hover. I need to reverse this. All I've tried underlines the buttons as well or doesn't underline the text.

Any help would be appreciated. I'm sure it's simple, but I can't see it.

Valce
  • 1

1 Answers1

0

maybe create a class called underlined and add that class only to the texts?

For example

.underlined:hover {
   text-decoration: underline;
}

then add the underlines class only for the texts like below:

<a href="link" class="underlined">text</a>

Let me know if this works!

sofshant
  • 183
  • 1
  • 9
  • I appreciate the response :) I was thinking of doing that, but didn't want to create a whole class for all the text links when I could select just the buttons with 'a button:hover'. I ended up scraping the whole button class altogether and just styling the a class. – Valce Mar 28 '21 at 02:19