Setting hyperlink as underline on hover (with no shadow effect)

Question

I have this styling:

#bbpress-forums li.bbp-forum-freshness a:hover, #bbpress-forums li.bbp-topic-freshness a:hover {
    text-decoration: underline;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

Yet, when I hover over the links:

As you can see they are still showing shadow effects. I have been able to use the aforementioned approach in other classes.

The page:

https://www.publictalksoftware.co.uk/support-forums/

Any advice appreciated. I just want it to be a underline with no shadow.

Please provide the shortest HTML required to re-produce this in addition to the CSS you've already provided. See [Minimal, Reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — esqew, Oct 23 '19 at 16:44

score 1 · Answer 1 · answered Oct 23 '19 at 16:51

1

Looks like it's a background color, not a box shadow.

Try to add to your class :

background: none;
border: none;

And you dont need to reset box-shadow.

answered Oct 23 '19 at 16:51

Julien van der Kluft

497
3
12

1

Thanks for this and for clarifying I did not need the `box-shadow` styling. – Andrew Truckle Oct 23 '19 at 17:14

score 1 · Accepted Answer · answered Oct 23 '19 at 17:00

1

Try this:

.bbp-forum-title:hover, .bbp-forum-freshness a:hover {
background: transparent!important;
border-top: none!important;
}

answered Oct 23 '19 at 17:00

Andrey

702
1
9
22

1

Thank you for this. Works well. :) – Andrew Truckle Oct 23 '19 at 17:15

Setting hyperlink as underline on hover (with no shadow effect)

2 Answers2