title: Why am I printing Â» instead of »?
body: <p>I want to just show this: <code>»</code>, but <code>Â»</code> is showing instead. Why is <code>Â</code> being added to it? How come it's not just the double right arrow? What's wrong with my code? </p>
  
  <p>CSS </p>
  
  <pre><code>#buttonServices1{
    transition: all 0.5s;
  }
  
  
  #buttonServices1 span {
    transition:0.5s;
  }
  
  #buttonServices1 span:after {
    content: '»';
    transition: 0.5s;
  }
  
  #buttonServices1:hover span {
    padding-right: 25px;
  }
  
  #buttonServices1:hover span:after {
    opacity: 1;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;button id="buttonServices1"&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Picture: </p>
  
  <p><a href="https://i.stack.imgur.com/QWiLs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QWiLs.png" alt="SEE"></a></p>