0

I have this SASS code to control the look of my table header cell:

th {
  ...
  &:hover {
    text-decoration: underline;
  }
  &:after {
    font-family: $icon-font;
    content: "\e917";
    text-decoration: none !important; (1)
  }
  &:hover:after { (2)
    text-decoration: none !important;
  }
}

Essentially, I have text and a chevron icon (in the :after pseudo-element) after that text. On hover, I want the text to underline, but NOT the icon.

How do I achieve that?

Things I already tried:

  • (1) Identifying I never want the icon to be underlined - no effect.
  • (2) Controling the pseudo-element of the pseudo-class - no effect.
artooras
  • 6,315
  • 9
  • 45
  • 78
  • Providing a full code snippet of all relevant code, and even a jsfiddle or equivalent is preferred to help us help you. – seemly Nov 08 '16 at 14:50
  • 1
    I was writing an answer but the question is closed. My solution is very simple, only add `display:inline-block` to `:after` pseudo-element: https://jsfiddle.net/blonfu/b5j9cgso/1/ –  Nov 08 '16 at 15:21
  • @blonfu, this is genius! :) Thank you. I will upvote your comment in the absence of (the possibility of) the answer. – artooras Nov 08 '16 at 15:24
  • I had not seen it but in the other similar question someone found the same solution: http://stackoverflow.com/questions/1238881/text-decoration-and-the-after-pseudo-element-revisited#answer-23960289 –  Nov 08 '16 at 15:26

0 Answers0