Должен цветить и без линии под текстом
a(href='#')
p.small-grey-text.link US Politics
p.link {
color: $smallGrey;
text-decoration: none;
&:hover {
color: $hoverTitle;
text-decoration: none;
}
}
Чтоб убрать подчеркивание text-decoration
нужно ставить не на параграф, а на ссылку а
. Изменять цвет также правильнее будет на ссылке, но будет работать и так:
a, a:hover {
text-decoration: none;
}
p.link {
color: #aaa;
width: 100px;
&:hover {
color: #c00;
}
}
HO! В данном случае я бы посоветовал избавиться от элемента р
- он здесь лишний со всех сторон. Я полагаю, что Вы его добавили из-за его свойств блокового элемента (margin
, padding
и т.д.), но это легко навешивается на саму ссылку. Код получается и чище, и правильнее:
a(href='#').small-grey-text.link US Politics
a.link {
text-decoration: none;
color: #aaa;
display: block;
margin: 1em;
&:hover {
color: #c00;
}
}
а почему не сделать так?
jade
a(href='#').small-grey-text.link US Politics
css
a {
text-decoration: none;
color: #aaa;
width: 100px;
&:hover {
color: #c00;
}
}
или же scss
a {
text-decoration: none;
p {
&.link {
color: #aaa;
width: 100px;
&:hover {
color: #c00;
}
}
}
}
jade
a(href='#')
p.small-grey-text.link US Politics