title: How to make a dotted underline link on hover?
body: <p>I have a link <code>&lt;a class="link-articles" href="#articles"&gt;My Articles&lt;/a&gt;</code></p>
  
  <p>and my css <code>.link-articles { text-decoration: underline; color: blue; }</code></p>
  
  <p>However, on hover I would like to have instead of blue underline a red underline, but the text should remain blue and only the underscore change color to red.</p>
  
  <p>How to do such thing?</p>