Removing underline on icon hover

[toolman]

Hi there,

I have the following fiddle:

Edit fiddle - JSFiddle - Code Playground

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

[SamA74]

.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 */

[toolman]

Thanks, but it still seems to be underlined

[ladans37]

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

[SamA74]

There is another rule affecting just the h4

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

[toolman]

Many thanks, that has worked

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;
        }
    }

[PaulOB]

@toolman

. Is this possible

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.