How to make a dotted underline link on hover?

Since you cannot denote which color a second color for the text underline, one strategy is to remove it and use a border.

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

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

Note that if you leave the text-underline, it will shift down when hovering, since it's placement is not exactly the same location as the bottom border.

This approach has an added advantage of being able to position the underline by using line-height and have alternate line styles, by replacing solid with dotted or dashed.

Borderless Approach:

As @Pacerier points out in the comments, here is an alternate strategy using pseudo-classes and CSS content (JSFiddle):

.link-articles
{
    position: relative;
}

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

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

However, with anti-aliasing, it may have some color-blending on the text edges. If you don't like the thought of having to manually put content in your CSS, you could use an attribute or duplicate element.

Just do:

a:hover {
  text-decoration-style: dotted
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

Use border-bottom:

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

See the demo