Removing underline on icon hover

HTML & CSS
1

Hi there,

I have the following fiddle:

The last box in purple (view all categories) uses an icon. However, when the box is hovered over, there is an underline on this icon which I cannot find how to remove this.

Does anyone know how I would do this?

I think I am maybe getting the :before and :hover mixed up

Thanks

2 
.category-all:hover {
   -webkit-box-shadow: 0px 10px 30px 2px rgba(53, 210, 169, 0.4);
   -moz-box-shadow: 0px 10px 30px 2px rgba(53, 210, 169, 0.4);
   box-shadow: 0px 10px 30px 2px rgba(53, 210, 169, 0.4);
   transform: translateY(-4px);
   text-decoration: underline; } /* Here */
2 Likes
3

Thanks, but it still seems to be underlined :confused:

4

Just change it to none : text-decoration: none; :slight_smile:

5

There is another rule affecting just the h4

    .category-all h4:hover, .category-all .show-all-categories span:hover {
      text-decoration: underline; }
1 Like
6

Many thanks, that has worked :slight_smile:

I’m now trying to have the text (not the icon) underlined on hover. Is this possible? I’m using SASS.

I’ve tried this, but it doesn’t work:

h4{ &:hover{ text-decoration: underline; } }

 h4:before{
        &:hover{
            text-decoration: none!important;
        }
    }
7

The easiest way is to put a span around the text and set the span to underline only.

If you underline the h4 on hover you can’t unhover stuff inside. :slight_smile:

2 Likes