Should bloom and without a line under the text

a(href='#') p.small-grey-text.link US Politics 
 p.link { color: $smallGrey; text-decoration: none; &:hover { color: $hoverTitle; text-decoration: none; } }

    2 answers 2

    To remove the underline text-decoration should be put not on the paragraph, but on the link а . Changing the color will also be more correct on the link, but it will work like this:

     a, a:hover { text-decoration: none; } p.link { color: #aaa; width: 100px; &:hover { color: #c00; } }

    HO! In this case, I would advise to get rid of the element р - it is superfluous from all sides here. I believe that you added it because of its block element properties ( margin , padding , etc.), but this is easily attached to the link itself. The code turns out both purer and more correctly:

     a(href='#').small-grey-text.link US Politics a.link { text-decoration: none; color: #aaa; display: block; margin: 1em; &:hover { color: #c00; } }

    Demo

      why not do this?

      jade

       a(href='#').small-grey-text.link US Politics

      css

       a { text-decoration: none; color: #aaa; width: 100px; &:hover { color: #c00; } }

      or scss

       a { text-decoration: none; p { &.link { color: #aaa; width: 100px; &:hover { color: #c00; } } } }

      jade

       a(href='#') p.small-grey-text.link US Politics
      • although it’s not advisable to hang classes on p