Removing underline on icon hover

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


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

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

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

There is another rule affecting just the h4

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

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

            text-decoration: none!important;

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:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.