title: Changing a:hover color for links containing accented letters
body: <p>Unsurprisingly I have some links on some html pages. One of them is:</p>
  
  <pre><code>&lt;a href="#"&gt;Questo &amp;egrave; un link&lt;/a&gt;
  </code></pre>
  
  <p>I manage their color and related transitions with the following css rules:</p>
  
  <pre><code>a, a:visited {
    text-decoration: none;
    border-bottom: 1px dotted white;
    color: inherit;
  
    /* transitions */
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
  }
  
  a:hover {
    border-bottom: 1px solid #003366;
    color: #003366;
  }
  </code></pre>
  
  <p>Both with the latest Safari and the latest Chrome the accent is not affected by the changing color. See screenshot, the accent should be blue as the other characters.</p>
  
  <p><img src="https://i.stack.imgur.com/Uae2v.png" alt="white accent, it should be blue"></p>
  
  <p><em>EDIT: I forgot to say that I am using a particular font. There is no problem with the default font or other font sets. But I need to use that one (Orbitron).</em></p>
  
  <p>Is there any fast way to fix this?</p>