Ответ 1

Поскольку вы не можете обозначить который цвет второй цвет для подчеркивания текста, одна стратегия заключается в его удалении и использовании границы.

.link-articles
{
    border-bottom: solid 1px blue;
    text-decoration: none;
}

.link-articles:hover
{
    border-bottom-color: red;
}

Обратите внимание, что если вы оставите text-underline, он будет сдвигаться вниз при наведении курсора, так как размещение не является тем же самым расположением, что и нижняя граница.

Этот подход имеет дополнительное преимущество в том, что он может позиционировать подчеркивание с помощью line-height и иметь альтернативные стили линий, заменив solid на dotted или dashed.

Подход без полей:

Как отмечает @Pacerier в комментариях, здесь представлена ​​альтернативная стратегия с использованием псевдоклассов и содержимого CSS (JSFiddle):

.link-articles
{
    position: relative;
}

.link-articles[href="#articles"]:after
{
    content: 'My Articles';
}

.link-articles:after
{
    color: red;
    left: 0;
    position: absolute;
    top: 0;
}

Однако при сглаживании он может иметь некоторое цветовое смешение на краях текста. Если вам не нравится мысль о необходимости вручную помещать content в свой CSS, вы можете использовать атрибут или дублирующий элемент.

Ответ 2

Используйте border-bottom:

a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;}

См. демонстрацию

Ответ 3

Используйте рамку:

.link-articles { text-decoration: none; border-bottom: blue 1px solid; }
.link-articles:hover { border-bottom: red 1px dotted; }

Ответ 4

Демо-скрипт

.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }

Ответ 5

Попробуйте следующее:

 .link-articles{ text-decoration: none; border-bottom:1px dotted; border-color:blue; }
 .link-articles:hover{ border-color:red; }

DEMO

Ответ 6

Показывать нижнюю границу при наведении:

a.link-articles {
    text-decoration: none;
    border-bottom: 1px dotted blue;
}
a.link-articles:hover {
    border-bottom: 1px dotted red;
}

Ответ 7

Стиль :hover используется для установки стиля, когда пользователь накладывает мыши на элемент.

.link-articles       { ... }
.link-articles:hover { ... }

И вы можете использовать свойство border-bottom вместо text-decoration для пунктирной, пунктирной и шириной.

Ответ 8

Вы можете использовать свойство CSS3 text-decoration-color, но, к сожалению, свойство text-decoration-color не поддерживается ни в одном из основных браузеров.

Firefox поддерживает альтернативу, свойство -moz-text-decoration-color.

Ссылка: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

Поддержка браузера: http://caniuse.com/#search=text-decoration-color

JSFiddle (не работает во всех браузерах)

Таким образом, лучший способ сделать это - использовать свойство border-bottom css в качестве трюка.