how come this code is building too much for my website?

I want to just show this: '»', not '»'. Why is 'Â' being added to it? How come it's not just the double right arrow? What's wrong with HTML5?

For this, I will provide my CSS4 and HTML5 code below:

CSS

#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;
}

HTML:

<button id="buttonServices1"><span>Services</span></button>

Picture: